javascripthtmlvideoyoutubeblogs

How to add Youtube Video Image to Blog?

I want to add a clickable YouTube video's image to my blog. I used the following code:

if (vidid == ""){
    var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
        + '<img class="no-thumbnail" src="img.youtube.com/vi/undefined/default.jpg"; />'
        + "</a>";
}else{
    var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
        + '<span class="play-button"></span><img class="'+ vidid
        + '" src="img.youtube.com/vi/'+vidid
        + '/default.jpg"; width="196px" height="147px"/>' + "</a>";
};
div.innerHTML = imgvid + '<div class="truncated-title"><h2>'
    + post_URL+'</h2></div>';
}

But it's not working. How can I resolve this?

Solution

  • Did you try using the YouTube integration API? You can get some more info in the documentation here and here. Using it that way, Youtube will automatically generate and show the preview image, player controls etc.

    Additionally, there might already be an extension for showing Youtube Videos on your blog - do you use Wordpress or a different standard Blogging platform?

    Edit

    Now that I know you are using Blogger - you should be able to add the youtube video to any post by default, please refer to this manual for details.