如何使用自动播放缩略图嵌入 YouTube 视频答案

【问题标题】：How to embed YouTube video with auto-play thumbnail如何使用自动播放缩略图嵌入 YouTube 视频
【发布时间】：2016-04-08 09:23:02
【问题描述】：

我想嵌入一个 YouTube 视频，但它应该有一个自动播放的海报/缩略图。

例如https://asana.com/ 它有一个嵌入的视频，但如果用户点击播放按钮就会播放。否则另一个视频将继续播放。

【问题讨论】：

标签： html twitter-bootstrap video youtube html5-video

【解决方案1】：

如果我对问题的理解正确，您希望自动播放一个视频，然后单击，您希望播放另一个视频？

如果是这样，看看这个：

<div class="the_container">
    <video style="top: 0px; left: 0px; position: absolute; width: 100%; cursor: pointer;" id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg" />
    </video>
    <div style="top: 0px; left: 0px; position: absolute; width: 100%; display: none;" id="fg-plyr">
        <div data-video-id="bTqVqk7FSmY" data-type="youtube"></div>
    </div>
</div>
<script>
    $(document).ready(function() {
        player1 = $('#bg-video');
        player2 = plyr.setup('#fg-plyr')[0];

        player1.on('click', function() {
            document.getElementById("bg-video").pause();
            document.getElementById("fg-plyr").style.display = "block";
            document.getElementById("bg-video").style.display = "none";
        });
    });
</script>

所以您需要做的就是将第一个“src”更改为要在后台播放的视频，然后将“data-video-id”更改为 yt-video-id，当您单击 BG-Video 时，您想播放。而且，你还需要导入 plyr，所以这里有一个 codepen 上完整东西的链接：http://codepen.io/anthyG/pen/WwJojB

您可以添加诸如悬停元素之类的东西，用户可以在 BG-Video 上看到它。

您也可以考虑使用像 @mlegg 这样的 HTML5-Video-Poster

【讨论】：

【解决方案2】：

大多数移动设备都禁用了自动播放。这是你想要做的吗？ http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster

【讨论】：