Question

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

在此代码中，当我增加div的填充（填充：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>

Answer 1

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

Answer 2

请尝试以下操作：-

some_val = helpers.my_func(index, tokenizer)

Js

<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

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

在iframe广告代码中将图片添加到背景youtube视频中

2 个答案: