Javascript Youtube视频在点击图像时显示

我已经看过了一些实现，但到目前为止还没有一个成功，所以我求助于发布。这个概念是：一个占位符图像一旦点击就会变成视频和自动播放

当前HTML：

<div id="ytvideo" style="display:none;">
    <iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />

我已经考虑过尝试重新加载

iframe

，但这似乎不起作用

有什么想法吗

---

标记：已修复

您忘记了协议-

www.youtube.com/…

将链接到服务器上的文件夹

使用protocol它工作得很好——我建议动态创建整个iframe，因为如果在开始时使用空的src属性，它将加载它嵌入的相同页面

<div id="ytvideo" style="display:none;"></div>
<!-- replaced your image with a span here for fiddle -->
<span id="homevideo" data-vidid="mbOEknbi4gQ">click me</span>

$(document).on('click','#homevideo',function(e){
    $('#homevideo').hide();
    $('#ytvideo').html('<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/'+$(this).attr("data-vidid")+'?autoplay=1"></iframe>').show();
});

点击我
$（文档）。在（'单击'，'家庭视频'上，功能（e）{
$（“#家庭视频”）.hide（）；
$（'#ytvideo'）.html（'.show（）；
});

---

因此，问题在于youtube url缺少http://前缀，而且iframe名称与它所包含的div相同。（我真傻）因此它将SRC连接到div，而不是iframe。

工作正常 试试这个

---

首先，不能对多个元素使用相同的id

如果有多个视频，则可以将视频的url存储在html中，并使用类而不是id

此外，如果将预览图像放在视频后面的背景中，它将一直保持在那里，直到加载iframe，从而减少单击时的“闪烁”效果

我还稍微重新构造了标记以减少冗余，这里我只指定一次视频大小和视频id

另外，您应该使用jQuery的
.one（'click'）
，而不是
.click（）
，因为您希望在事件侦听器第一次启动后将其删除

html:

jQuery：

$('.ytvideo[data-video]').one('click', function() {
    $(this).html('<iframe allowfullscreen  src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});

$（'.ytvideo[数据视频]）.one（'click'，function（）{
$（this.html（“”）；
});

如果希望支持不支持脚本的浏览器，则必须在已经包含iframe的.ytvideo div中添加一个“noscript”元素

小提琴：
如其中一条评论中所述，您可以从api获得img和视频

如果您不想维护图像，只想从YouTube上获得它，这将是一件好事。（但我不确定YT是否提供了939大小的图像，因此在您的情况下，您可能仍然希望使用自己的图像）。我已经输入了一个随机频道名“RIDEChannel”，请随意更改您的频道名

<div id="vid"></div>

$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
    var vid = $("#vid");
    $.each(myvid.data.items, function (i, item) {
        vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
        $(document).on("click", "#vid img", function (event) {
            vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
            $(this).hide();
        });
    });
});


$.getJSON（“http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=？”，函数（myvid）{
var vid=$（“vid”）；
$。每个（myvid.data.items，函数（i，item）{
见附录（“”）；
$（文档）。在“单击”上，“查看img”，功能（事件）{
见附录（“”）；
$（this.hide（）；
});
});
});
我认为使用youtube API会更好，请参见：我认为您错过了一个“http://”，使iframe有效地指向
http://www.yourdomain.com/directory/www.youtube.com/embed/[myvidid]？autoplay=1
@Roman似乎已经掌握了这一点。这是第一个问题。我意识到的第二个问题是。。。iframe与div的名称相同，因此它将src附加到div，而不是iframe（API提供了一个值得检查的图像
snippets.thumbnails.maxres
）
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});

<div class="ytvideo" 
     data-video="73sgatbknvo"
     style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">

     <div class="seo">
         Have a meaningful description of the video here
     </div>
</div>

.ytvideo {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.ytvideo iframe {
    border-style: none;
    height: 100%;
    width: 100%;
}
.ytvideo .seo {
    display: none;
}

$('.ytvideo[data-video]').one('click', function() {
    $(this).html('<iframe allowfullscreen  src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});

<div id="vid"></div>

$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
    var vid = $("#vid");
    $.each(myvid.data.items, function (i, item) {
        vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
        $(document).on("click", "#vid img", function (event) {
            vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
            $(this).hide();
        });
    });
});