Как поверх плеера iframe вставить картинку?
Страницы: Пред. 1 2
Как поверх плеера iframe вставить картинку?, Нужна ваша помощь.
Может быть так? Для одного iframe видео. Если несколько, код придется немного изменить.

После отсчета открывается видео, либо раньше по клику на видео.


Демо:

https://jsfiddle.net/17sxjhyu/4/

Код
Добавить в стили то что в <style></style>

Код
Вставить в низ страницы то что в <script></script>

Код
Поменять кнопку на свою (<img src="http://icons.iconarchive.com/icons/dryicons/aesthetica-2/48/play-icon.png">)


Код:
Код
<!DOCTYPE html>
<html>
   <head>
      <style>
         .stub {
            background-color:#f9f9f9;
            color:#aaa;
            position:relative;
            border:5px double #ccc; 
            cursor:pointer;
            display:flex;
            justify-content:
            center;align-content: 
            space-between;align-items: 
            center;
            flex-direction: column;
            }
         .stub img {}
         .stub .button {
            width:160px;
            padding:3px;
            border:1px solid #ccc;
            border-radius: 5px;
            text-align:center;
            }
         .count {
            position:absolute;
            bottom:0;
            right:0;
            width:100px;
            padding:3px;
            background-color:#999;
            color:#fff;
            border-top-left-radius: 8px;
            text-align:center;
            }
      </style>
   </head>
   <body>
      <h3>Заглушка видео для SEO BOSS</h3>
      
      <iframe width="469" height="224" src="https://www.youtube.com/embed/Vd5GTTybtnI"></iframe>
      
      <script>
         var iframe = document.querySelector('iframe');
         iframe.style.display = 'none';
         
         var div = document.createElement('div');
         div.className = 'stub';
         div.style.width = iframe.width+'px';
         div.style.height = iframe.height+'px';
         
         // Тут писать html код в одну строку. <div class="countdown"></div> - не трогать, нужен для таймера
         div.innerHTML = '<img src="http://icons.iconarchive.com/icons/dryicons/aesthetica-2/48/play-icon.png"><p>Видео скрыто для экономии трафика</p><div class="button">Показать содержимое</div><div class="countdown"></div>';
         document.body.insertBefore(div, iframe.div);
         
         
         // Таймер

         var counter = 15; //Сколько секунд
         var active = setInterval(countdown, 1000);

         function countdown(){
            if (counter >0){
               counter-=1;
               document.querySelector('.countdown').innerHTML='<div class="count">'+counter+' секунд</div>';
            }
            else{
               window.clearInterval(active);
               document.body.removeChild(document.querySelector('.stub'));
               document.querySelector('iframe').style.display = 'block';   
            }   
         }
         
         
         
         // На клик показывается
         div.onclick = function(){
            document.body.removeChild(document.querySelector('.stub'));
            document.querySelector('iframe').style.display = 'block';
            window.clearInterval(active);
         }
      
      </script>
   </body>
</html>
 
Цитата
rushot пишет:
Может быть так? Для одного iframe видео. Если несколько, код придется немного изменить.
Вот это вы напечатали (сразу видно специалист) smile:)
У нас iframe обернут кодом преролл (над этим процессом рекламодатель возился неделю) smile:D 

Хотим обернуть нужной нам картинкой все плееры iframe (но думаем, могут быть конфликты) smile:confused:

Отсчет по времени нам не нужен, нужно просто вставить (нужную нам картинку во все плееры) перед показом преролла, а уже потом фильма smile:)

Но судя по коду, это полный капец (столько всего нужно править) smile:wall:
Почему завистники всегда чем-то огорчены? Потому что их снедают не только собственные неудачи, но и успехи других.
Страницы: Пред. 1 2
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
18:51 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
14:46 Яндекс.Фильтры 
13:08 К лету готов? АПдейт Яндекс выдача 29 мая 2024 
22:17 А ты жарил? АПдейт Яндекс выдача 11 мая 2024 
19:21 Кто как борется с ботами ПФ? 
14:58 Adtrafico - Правильная партнёрская сеть под бурж трафик 
09:36 Сайт не реагирует на изменения в CSS 
07:01 Заказать отзывы, купить отзывы. 
07:00 Накрутка ПФ для любых сайтов. Быстрый результат 
20:20 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 
16:24 Burzh.top|Партнерская программа под любой вид трафика (email, спам, УБТ) 
13:54 Ural-obmen.ru — выгодный сервис обмена 
13:08 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 
12:45 PROXY5.ru — Анонимные прокси дешево / IPv4 на 30 дней от 5$ 
23:22 Калифорния легализует компостирование людей к 2027 году 
19:23 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
16:05 Популярный сократитель заблокирован? 
15:12 Точные прогнозы на футбол 
20:26 Ваше мнение о видео играх 
15:07 Куплю проигрышные букмекерские аккаунты 
10:31 ⭐️ Заработок до 500к/мес на БОНУСАХ ⭐️