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

• 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

1 Answer 1

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/