【问题标题】:Adding Image to the background youtube video on iframe tag将图像添加到 iframe 标签上的背景 youtube 视频
【发布时间】:2018-08-10 13:21:03
【问题描述】:

应用此代码后,我正在通过 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>

【问题讨论】:

    标签: javascript css html iframe youtube-iframe-api


    【解决方案1】:

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

    【讨论】:

      【解决方案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; }
      

      【讨论】:

      • 我试过了,但没有任何改变 1. 图片没有出现在播放图标下,图片来了,但视频重叠在图片 2. 当我点击播放按钮时图片没有年久失修和视频在图像上播放
      • 我将身高和体重放在 iframe 标签和 div 标签上很酷
      猜你喜欢
      • 2015-08-14
      • 2015-04-28
      • 1970-01-01
      • 2017-05-27
      • 2018-06-09
      • 1970-01-01
      • 2016-02-14
      • 2021-12-13
      • 2019-03-11
      相关资源
      最近更新 更多