Question

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

我希望有一个显示启动图像的图像，点击它将播放的图像一个youtube Movie在同一个占位符中。（很明显，我不想直接显示嵌入式播放器，而是首先显示可点击的图像）

Answer 1

尝试这样的事情：

<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/

Answer 2

以下是使用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示例）

Answer 3

我通过Google发现了这一点，而不是使用嵌入，而是采用YouTube为HTML5设计的新（相对）iframe风格。我发现缺少的解决方案是它没有区分文本节点和元素（firefox的nextSibling和IE的nextSibling）。此外，当点击视频时，用户需要点击两次，一次在图像上，然后一次在YouTube播放器上。这是通过YouTube网址中的自动播放标记修复的。最终行为在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>

Answer 4

你可以用视频和图像制作一个div，隐藏视频（display:none），单击图像时，隐藏它并显示视频。

点击图片（闪屏）播放嵌入式Youtube电影

4 个答案: