Jquery 单击图像（splashscreen）播放嵌入的Youtube电影

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

我想有一个图像，显示一个飞溅的图像，点击该图像将播放

---

同一占位符中的youtube电影。（为了清楚起见，我不想直接显示嵌入式播放器，而是首先显示一个可点击的图像）

您可以使用视频和图像进行div，隐藏视频（

显示：无）

），

---

单击图像时，将其隐藏并显示视频。

我通过谷歌找到了这一点，需要使用YouTube为HTML5提供的新（相对）iframe样式，而不是嵌入。我发现解决方案的不足之处在于它没有区分文本节点和元素（firefox的nextSibling和IE的nextSibling）。此外，当点击视频时，用户需要点击两次，一次点击图像，然后点击YouTube播放器。这是通过YouTube URL中的自动播放标志修复的。在Chrome、Firefox、IE7+等浏览器中，最终的行为是正确的

以下是我的最终解决方案：

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

函数actualNextSibling（el）{//需要平滑默认firefox/IE行为
do{el=el.nextSibling}while（el&&el.nodeType！==1）；
返回el；
}

以下是如何使用jQuery进行操作。在前面给出的示例中，即使容器被隐藏，仍会播放视频

创建用于保存缩略图的容器：

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

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

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

$('#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');
});

<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); });

$（'#video'）。在（'click'，function（）上{
$（this.html（“”）.css（'background'，'none'）；
});

---

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

尝试以下方法：

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

$('#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');
});

<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); });

$（'img'）。单击（函数（）{
var视频=“”；
$（this.replacetwith（video）；}）；

---

此处演示：

@RonaldWildschut您介意定位您找到的解决方案吗？