点击图片(闪屏)播放嵌入式Youtube电影

Question

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

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

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

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