Google +和Facebook风格的iframe youtube视频。默认情况下，当单击图像的视频播放时，显示视频图像

问题描述

我已经有一个将视频嵌入到我的网站中的插件，称为oembed。我需要的是一个javascript代码，当单击该图像时，它会将youtube iframe或其他嵌入内容转换为视频的默认图像，然后出现并播放视频播放器。 Google +和Facebook已经实现了这个想法。

I already have a plugin that embeds videos on my site called oembed. What I need is a javascript code that converts youtube iframes or another embeds to the default image of the videos, when the image is clicked video player appears and plays. Google + and facebook have implemented this idea. Please let me know how to make this happen.

这是我的YouTube iframe的示例：

This is an example of my youtube iframe:

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

我找到了两个代码并将其修改为：

I found two codes and modified them into this:

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时出现问题。

The problem is now the embed works but there is a problem catching the video Id.

推荐答案

问题是iframe周围有一个链接元素。我相信您可以通过删除链接并使用其他方法（例如div）来解决此问题：

The problem is that there's a link element surrounding your iframe. I believe you can fix that by removing the link and using something else, like a 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;
        }
    }
}

这篇关于Google +和Facebook风格的iframe youtube视频。默认情况下，当单击图像的视频播放时，显示视频图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！