javascript - jquery replace YouTube iFrame - Stack Overflow

admin管理员组

文章数量:1024924

If a YouTube iframe embed code is ...

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

how can you extract dd8W4PNUU3Q ie, the video id

and replace the entire iframe with

<img style="background-image:url('.jpg');" class="someClass"/>

and wrap the image with a <a> giving...

<a href="/?v=dd8W4PNUU3Q"><img style="background-image:url('.jpg');" class="someClass"/></a>

If a YouTube iframe embed code is ...

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

how can you extract dd8W4PNUU3Q ie, the video id

and replace the entire iframe with

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

and wrap the image with a <a> giving...

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

• javascript
• jquery
• iframe
• youtube

Share Improve this question Follow asked Nov 20, 2011 at 19:13 Yusaf KhaliqYusaf Khaliq 3,3931111 gold badges4545 silver badges8282 bronze badges 3

• what exactly are you trying to do? is this supposed to work in youtube site with some kind of script? bookmarklet? or with embedded youtube in your site? – alonisser Commented Nov 20, 2011 at 19:25
• I'd be curious to understand the end goal. If you're doing this client side, the player has already been invoked and is showing the player image. You just don't want the player to be embedded? This is a fairly data- and code-heavy way to do this; but again, I don't necessarily understand the big picture and I could be wrong. – Greg Pettit Commented Nov 20, 2011 at 19:25
• Do you need the plete js solution or is pseudo coding you to the solution is enough? I'm not sure I have the time to write the whole thing – alonisser Commented Nov 20, 2011 at 19:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./?v='+id+'">'+
                                '<img src="http://i1.ytimg./vi/'+id+'/hqdefault.jpg"'+
                                ' class="someClass" /></a>' );
    }

});

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

If a YouTube iframe embed code is ...

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

how can you extract dd8W4PNUU3Q ie, the video id

and replace the entire iframe with

<img style="background-image:url('.jpg');" class="someClass"/>

and wrap the image with a <a> giving...

<a href="/?v=dd8W4PNUU3Q"><img style="background-image:url('.jpg');" class="someClass"/></a>

If a YouTube iframe embed code is ...

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

how can you extract dd8W4PNUU3Q ie, the video id

and replace the entire iframe with

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

and wrap the image with a <a> giving...

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

• javascript
• jquery
• iframe
• youtube

Share Improve this question Follow asked Nov 20, 2011 at 19:13 Yusaf KhaliqYusaf Khaliq 3,3931111 gold badges4545 silver badges8282 bronze badges 3

• what exactly are you trying to do? is this supposed to work in youtube site with some kind of script? bookmarklet? or with embedded youtube in your site? – alonisser Commented Nov 20, 2011 at 19:25
• I'd be curious to understand the end goal. If you're doing this client side, the player has already been invoked and is showing the player image. You just don't want the player to be embedded? This is a fairly data- and code-heavy way to do this; but again, I don't necessarily understand the big picture and I could be wrong. – Greg Pettit Commented Nov 20, 2011 at 19:25
• Do you need the plete js solution or is pseudo coding you to the solution is enough? I'm not sure I have the time to write the whole thing – alonisser Commented Nov 20, 2011 at 19:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./?v='+id+'">'+
                                '<img src="http://i1.ytimg./vi/'+id+'/hqdefault.jpg"'+
                                ' class="someClass" /></a>' );
    }

});

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

本文标签： javascriptjquery replace YouTube iFrameStack Overflow