0

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

当前的 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但这似乎不起作用。

有任何想法吗？

标记：固定

4

5 回答 5

1
于 2013-10-02T08:06:19.793 回答
1

如评论之一所述，您可以从 api 获取 img 和 video。

如果您不想维护图像，只想将其从 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();
        });
    });
});
于 2013-10-02T09:17:14.120 回答
0

工作演示

尝试这个，

首先，您不能为多个元素拥有相同的 id，<div id="ytvideo"并且<iframe id="ytvideo"

[myvidid] in 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");
});
于 2013-10-02T08:25:06.890 回答
0

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

于 2013-10-02T08:10:55.437 回答
0

如果您有超过 1 个视频，则将视频的 url 存储在 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/

于 2013-10-02T08:28:57.400 回答