将图像添加到 iframe 标签上的背景 youtube 视频

Question

应用此代码后，我正在通过 Image 获取视频，但我想在 youtube 上添加带有播放按钮的 Image

在这段代码中，当我增加 div 的填充（填充：18px）时，现在视频变得更短，背景图像又回来了 但我希望 Video 应该在单击 Image 时播放，视频应该在完整容器上播放

<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>

Answer 1

Videojs 应该以最简单的方式解决您的问题 :) 看一看！ https://docs.videojs.com/posterimage

Answer 2

请试试这个：-

<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; }