Embed youtube for mobile page

mobile-websitevideoyoutube

Is there a way to embed a link to a youtube video, so that the video will play in fullscreen on a mobile phone when the user click on the link?

The default iframe embed code will play the video inline on android phones -(

If I go to m.youtube.com they kinda does what i need, but they do it in an odd way because they generate different html and different links and protocols for viewing the video depending on which mobile phone I have.

This does make sense because the way to serve the video depend on the users phone, but is there a way for me to get some javascript/html from youtube so I can do the same thing on my own page?

Best Answer

The proper way to do it seems to be like so:

<iframe class="youtube-player" type="text/html" width="640" height="385" 
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

Check out the Youtube blog or that other blog post.

Now you only need to find a way to figure out which width and height to use for each device.

Related Solutions

Php – How to get a YouTube video thumbnail from the YouTube API

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

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

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

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

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

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

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

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

For the standard definition version of the thumbnail, use a URL similar to this:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

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

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

All of the above URLs are available over HTTP too. Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example URLs above.

Alternatively, you can use the YouTube Data API (v3) to get thumbnail images.

Is it possible to embed a YouTube video for mobile devices in a page, rather than linking to YouTube

Use the iframe-embedded version of the player instead of the Flash one. The embedded version is smart enough to render the appropriate player based on the device (ie, it may render the Flash version for phones like the Android that support it, or the HTML5 version for iPhone).

If you load the video on Youtube.com, there's a "Share" button that gives you the code, so you basically just need to copy-paste. It should look something like this:

<iframe 
    width="240" height="135" 
    src="http://www.youtube.com/embed/videoid" 
    frameborder="0" allowfullscreen>
</iframe>

~~On the developers' site there's a more advanced version of the same thing, with various parameters and a demo of the Javascript API.~~

Update: As of January 2015, youtube's javascript api is officially deprecated. It has been replaced with the new and improved Iframe API.

Best Answer

Related Solutions

Php – How to get a YouTube video thumbnail from the YouTube API

Is it possible to embed a YouTube video for mobile devices in a page, rather than linking to YouTube

Related Topic