jquery取代了YouTube iFrame

时间:2011-11-20 19:13:35

标签: javascript jquery iframe youtube

如果YouTube iframe嵌入代码是......

<iframe width="560" height="315" src="http://www.youtube.com/embed/dd8W4PNUU3Q?rel=0" frameborder="0" allowfullscreen></iframe>

如何提取dd8W4PNUU3Q即视频ID

并用

替换整个iframe
<img style="background-image:url('http://i1.ytimg.com/vi/dd8W4PNUU3Q/hqdefault.jpg');" class="someClass"/>

并使用<a>给予图片包裹...

<a href="http://www.MYURL.com/?v=dd8W4PNUU3Q"><img style="background-image:url('http://i1.ytimg.com/vi/dd8W4PNUU3Q/hqdefault.jpg');" class="someClass"/></a>

1 个答案:

答案 0 :(得分:5)

var RE = /embed\/([a-zA-Z0-9_-]{11})/;

jQuery( "iframe" ).each(function(){

var id = ( this.src.match( RE ) || [] )[1];

    if( id ) {
    jQuery( this ).replaceWith( '<a href="http://www.MYURL.com/?v='+id+'">'+
                                '<img src="http://i1.ytimg.com/vi/'+id+'/hqdefault.jpg"'+
                                ' class="someClass" /></a>' );
    }

});

Jsfiddle:http://jsfiddle.net/4E3DH/1/