Pages

Thursday, November 29, 2012

How to get thumbnail of YouTube video link using YouTube Video ID?

Each YouTube video has 4 generated images. They are predictably formatted as follows:

http://img.youtube.com/vi/<insert-youtube-video-id>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id>/3.jpg

The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:

http://img.youtube.com/vi/<insert-youtube-video-id>/default.jpg

For the high quality version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id>/hqdefault.jpg

There is also a medium quality version of the thumbnail, using a url similar to the HQ:

http://img.youtube.com/vi/<insert-youtube-video-id>/mqdefault.jpg

For the maximum resolution version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id>/maxresdefault.jpg

Saturday, November 3, 2012

How to fix z-index in YouTube videos

Add a parameter to force YouTube iframe to set a low z-index.

If you have any element you’ll like to show above a YouTube iframe you just have to add a parameter to the iFrame URL.

wmode=transparent

Add the wmode parameter in the src URL.

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/asfdsafsdfWSDF?wmode=transparent" frameborder="0"></iframe>

If you have YouTube videos that appear infront of your other website content and giving it a lower z-index does not seem to do the trick then try adding the wmode parameter to the embedded movie.


<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="transparent" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>