Google + And Facebook Style Iframe Youtube Video. By Default Shows Video Image, When Image Clicked Video Plays

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 v

Solution 1:

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;
        }
    }
}