Question

我已经看了一些这方面的实现，到目前为止没有一个工作，所以我正在求助。这个概念是：一旦点击的占位符图像变为视频和自动播放。

当前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" />

当前的JS：

jQuery(document).on('click','#homevideo',function(e){
    jQuery('#ytvideo').show();
    jQuery('#homevideo').hide();
    jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
    jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});

我看过尝试重新加载iframe，但这似乎不起作用。

有什么想法吗？

MARKED：FIXED

Answer 1

您忘记了协议 - www.youtube.com/…会链接到服务器上的文件夹。

使用协议它工作正常 - 我建议动态创建整个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();
});

http://jsfiddle.net/HuVqm/

Answer 2

所以问题在于youtube url缺少http：//前缀，而且iframe名称与它所包含的div相同。（我多么愚蠢）因此它附加了SRC到了div，而不是iframe。

Answer 3

工作DEMO

试试这个，

首先，您不能为多个元素<div id="ytvideo"和<iframe id="ytvideo"

使用相同的ID [myvidid]中的

http://www.youtube.com/embed/[myvidid]?autoplay=1应替换为视频的ID

HTML

<div id="ytvideo1" 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="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>

码

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

Answer 4

如果您有超过1个视频，那么将网址存储到html中的视频并使用类而不是ID可能会很有用。

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

我还稍微重新构建了标记以减少冗余，这里我只指定了视频的大小和视频ID。

此外，您应该使用jQuery的.one('click')而不是.click()，因为您希望在第一次触发后删除该事件侦听器。

HTML：

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

CSS：

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

jQuery的：

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

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

小提琴： http://jsfiddle.net/6ARc7/

Answer 5

正如其中一条评论所述，您可以从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();
        });
    });
});

Youtube视频显示点击图片

5 个答案:

工作DEMO

HTML

码