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

我想知道如何制作如下的东西：

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

Answer 1

尝试这样的事情：

 $('img').click(function(){ var video = ''; $(this).replaceWith(video); }); 

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

Answer 2

以下是使用jQuery的方法。 前面给出的例子，即使隐藏了容器，仍然播放video。

创建一个容器来容纳缩略图：

然后你可以使用以下内容在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(' 

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

Answer 3

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

这是我的最终解决方案：

Answer 4

您可以使用video和图像制作div，隐藏video（ display:none ），单击图像时隐藏video并显示video。