如何嵌入带有自动播放缩略图的 YouTube 视频

Question

我想嵌入 YouTube 视频，但它应该有自动播放功能 poster/thumbnail。

例如https://asana.com/ it has a embedded video but it will play if user clicks on play button. Otherwise another video will keep playing continuously.

Answer 1

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

Answer 2

如果我没理解错的话，你想让一个视频自动播放，然后点击一下，你想播放另一个视频？

如果是，请看这个：

<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，所以这里有一个 link 到 codepen 上的完整内容：http://codepen.io/anthyG/pen/WwJojB

您可以添加类似悬停元素的内容，用户可以通过背景视频看到它。

您也可以考虑使用像@mlegg

这样的HTML5-Video-Poster

如何嵌入带有自动播放缩略图的 YouTube 视频

How to embed YouTube video with auto-play thumbnail

html

youtube

video

html5-video

twitter-bootstrap