Добавление изображения к фоновому видео youtube в теге iframe

После применения этого кода я получаю видео поверх изображения, но я хочу добавить изображение поверх you-tube с кнопкой воспроизведения на нем.

В этом коде, когда я увеличиваю отступ div, который равен (padding: 18px), видео становится короче, а фоновое изображение возвращается. но я хочу, чтобы видео воспроизводилось при нажатии на изображение, видео должно воспроизводиться в полном контейнере

<div id="background-video" style="background: url(images/fight-c-diff.png) no-repeat; padding: 18px; width: 600px; height: 300px;">

<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0"  allowfullscreen>
</iframe>

</div>
1
0
3 477
2

Ответы 2

Videojs должен решить вашу проблему самым простым способом :) Взглянем! https://docs.videojs.com/posterimage

Пожалуйста, попробуйте это: -

<div id="background-video" style="background: url(https://cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg) top center no-repeat; background-size: cover;">

    <iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
    </iframe>
    <a class="play-btn" href="#">Play Button</a>

</div>

Js

 jQuery('.play-btn').click(function(e) {
      e.preventDefault();
      jQuery(this).hide();
      jQuery('#background-video').find('iframe').show();
      jQuery('#background-video').find('iframe')[0].src += "?autoplay=1";
   });

CSS

#background-video { width: 640px; height: 360px; position: relative; }
#background-video iframe { width: 100%; height: 100%; display: none; }
#background-video .play-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; line-height: 0px; background: url(http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png) center center no-repeat; background-size: 120px auto; }

Я пробовал, но никаких изменений не произошло 1. Изображение не появилось под значком воспроизведения, изображение идет, но видео перекрывает изображение 2. когда я нажимаю кнопку воспроизведения, изображение не повреждено, и видео воспроизводится поверх изображения

Anurag Ranjan 10.08.2018 15:43

Я помещаю высоту и вес в тег iframe, а также тег div, это круто

Anurag Ranjan 10.08.2018 15:48

Другие вопросы по теме