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

应用此代码后，我将在图像上获得视频，但我想在带有播放按钮的电子管上添加图像

在这段代码中，当我增加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>

---

Videojs应该以最简单的方式解决您的问题：） 看一看

请尝试以下操作：-

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

CSS

---

我试过了，但没有任何改变。图像未出现在播放图标下，图像即将出现，但视频与图像2重叠。当我点击“播放”按钮时，图像没有破损，视频在图像上播放，我在iframe标签和div标签上添加了身高和体重，这很酷吗

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

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