google+和facebook风格的iframeyoutube视频.默认情况下显示视频图像，当图像点击视频播放时

google + and facebook style iframe youtube video. by default shows video image, when image clicked video plays

本文关键字：视频 图像 播放 显示 情况下 facebook 风格 默认 iframeyoutube google+      更新时间：2023-09-26

我已经有了一个插件，可以在我的网站上嵌入视频，名为oembed。我需要的是一个javascript代码，它可以将youtube iframes或其他嵌入到视频的默认图像中，当图像被点击时，视频播放器就会出现并播放。Google+和facebook已经实现了这一想法。请让我知道如何做到这一点。

这是我的youtube iframe:的一个例子

<iframe width="267" height="200" src="http://www.youtube.com/embed/YOUTUBEID;feature=oembed" frameborder="0" allowfullscreen=""></iframe>

我找到了两个代码，并将它们修改为：

var RE = /embed'/([a-zA-Z0-9_-]{11})/;
jQuery( "iframe" ).each(function(){
var id = ( this.src.match( RE ) || [] )[1];
if( id ) {
jQuery( this ).replaceWith( 
                            '<img   width="420" height="215"  src="http://i1.ytimg.com/vi/'+id+'/hqdefault.jpg"'+
                            ' class="youtube" />' );
}
});
var youtubeIFRAME = '<p class="close">CLOSE</span><iframe data-address="$1" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>';
jQuery("img.youtube").click(function(){
var $this = $(this);   
$this.replaceWith('<iframe width="420" height="315" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>'                  
                  .replace("$1", $this.attr("data-address")));
});

现在的问题是嵌入可以工作，但捕捉视频Id时出现问题。

问题是iframe周围有一个链接元素。我相信你可以通过删除链接并使用其他东西来解决这个问题，比如div:

function changeiframe() {
objs = document.getElementsByTagName('iframe');
for (i in objs) {
        if (objs[i].src) {
        vidid = objs[i].src.split('/')[4].split('?')[0];
        linkurl = 'http://www.youtube.com/watch?v='+vidid;
        bgurl = 'http://img.youtube.com/vi/'+vidid+'/0.jpg';
        imgurl = 'playsh.png';
        container = document.createElement('div');
        container.style.backgroundImage = 'url('+bgurl+')';
        container.className += "youvid";
        img = document.createElement('img');
        img.src = imgurl;
        container.appendChild(img);
        objs[i].outerHTML = container.outerHTML;
        }
    }
}
相关文章：