单击图像（启动画面）播放嵌入的 Youtube 电影答案

【问题标题】：Click on image (splashscreen) to play embedded Youtube Movie单击图像（启动画面）播放嵌入的 Youtube 电影
【发布时间】：2012-01-19 12:07:07
【问题描述】：

我想知道如何制作如下内容：

我想要一个显示启动图像的图像，单击它将播放的图像同一占位符中的 youtube 电影。（要清楚我不想直接显示嵌入式播放器，而是首先显示可点击的图像）

【问题讨论】：

标签： jquery image youtube onclick

【解决方案1】：

以下是使用 jQuery 的方法。前面给出的示例，即使在容器被隐藏时仍然播放视频。

创建一个容器来保存您的缩略图：

<div id="video"></div>

然后你可以在 CSS 中设置缩略图的样式，如下所示：

#video {
    display: block;
    width: 320px;
    height: 240px;
    background: url(images/my_video_thumb.jpg) no-repeat top left;
}

...然后您想删除背景并使用 jQuery 动态创建 iframe，如下所示：

$('#video').on('click', function() {
    $(this).html('<iframe src="http://www.youtube.com/embed/abcdef12345?rel=0&autoplay=1" width="320" height="240" frameborder="0" allowfullscreen="true">').css('background', 'none');
});

演示：codepen（包括 VanillaJS 和 jQuery 示例）

【讨论】：

【解决方案2】：

试试这样的：

<img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">
$('img').click(function(){
var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video); });

在这里演示：http://jsfiddle.net/2fAxv/1/

【讨论】：

【解决方案3】：

我通过 Google 找到了这个，并且不需要使用嵌入，而是使用 YouTube 为 HTML5 提供的新（相对）iframe 样式。我发现缺少解决方案，因为它没有区分文本节点和元素（firefox 的 nextSibling 和 IE 的 nextSibling）。此外，当点击视频时，用户需要点击两次，一次是在图片上，一次是在 YouTube 播放器上。这已通过 YouTube URL 中的自动播放标志修复。最终行为在 Chrome、Firefox、IE 7+ 等中是正确的。

这是我的最终解决方案：

<script type="text/javascript">
    function actualNextSibling(el) {    // needed to smooth out default firefox/IE behavior
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>
<div onclick="actualNextSibling(this).style.display='block'; this.style.display='none'">
    <img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>
<div style="display: none">
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe>
</div>

【讨论】：

【解决方案4】：

您可以制作包含视频和图像的 div，隐藏视频 (display:none)，单击图像时，将其隐藏并显示视频。

【讨论】：

@RonaldWildschut 你介意定位你找到的解决方案吗？
sitepoint.com/forums/…