How to embed a Youtube video on your mobile and desktop web-application?

Why host your videos on Youtube?

Though, it is possible to get the video file URL of a YouTube video using sites like http://www.keepvid.com, but doing it programmatically is a problem you would like to give a pass. Hosting videos on your website involves a lot of challenges like making those videos work on multiple platforms and browsers, and making sure that video streaming doesn't take all your server's bandwidth due to the sheer size of videos. YouTube is already taking care of all those things, so it make sense to put all your videos on YouTube and let YouTube handle all these problems.

Working code for Safari, Chrome, Iphone and Ipads

Fortunately, there is a way to embed a youtube video in your mobile app by writing the same code compatible to many browsers like Safari 4+, Chrome 6+, Iphone 3+, and Ipad 1 (iOS3+).

<object id="idVideo" name="idVideo" width="90%" height="70%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
                      	<param name="movie" value="http://www.youtube.com/watch?v=gCAcU3p9GNo&hl=en_US&fs=1&rel=0&hd=1&border=0&enablejsapi=1"/>';
                      	<param name="allowFullScreen" value="true"/>';
                      	<param name="allowScriptAccess" value="always"/>';
                      	<param name="wmode" value="transparent"/>';
                      	<embed src="http://www.youtube.com/watch?v=gCAcU3p9GNo&hl=en_US&fs=1&rel=0&hd=1&border=0&enablejsapi=1" type="application/x-shockwave-flash" allowScriptAccess="always" allowfullscreen="true" width="100%" id="idVideoPlayer" name="idVideoPlayer" wmode="transparent" height="80%"/>
                      </object>';
                      

Select all Open in new window

This markup should embed a youtube video on your website and has been tested successfully to work on browsers mentioned above.

Dynamic update of Youtube video URL
Sometimes it makes sense to just update the video URL in a DHTML way rather than loading the Object element again. You can do so using the following JavaScript code

//get the handle to Video object with id 'idVideo'
                      var videoObj = document.getElementById("idVideo");
                      
                      //get the handle to the array of param elements
                      var params = videoObj.getElementsByTagName("param");
                      
                      //iterate through the param elements
                      for ( var counter = 0; counter < params.length; counter++ )
                      {
                      	var param = params [ counter ];
                      
                      	//if the param name is 'movie', then set the 'value' attribute to the youtube video URL you want to dynamically set
                      	if ( param.getAttribute( "name" ) == "movie" )
                      	{
                      		param.setAttribute( "value", "http://www.youtube.com/watch?v=gCAcU3p9GNo&hl=en_US&fs=1&rel=0&hd=1&border=0&enablejsapi=1" );
                      	}
                      }
                      
                      //finally set the same youtube video URL to the embed object with id 'idVideoPlayer'
                      document.getElementById( "idVideoPlayer" ).setAttribute( "src", "http://www.youtube.com/watch?v=gCAcU3p9GNo&hl=en_US&fs=1&rel=0&hd=1&border=0&enablejsapi=1" );
                      

Select all Open in new window

jQuery alternative for dynamically updating Youtube URL
if you are using jquery, then your code would be reduced to

$( "#idVideo param[name='movie']" ).attr("value", "http://www.youtube.com/watch?v=gCAcU3p9GNo&hl=en_US&fs=1&rel=0&hd=1&border=0&enablejsapi=1");
                      $( "#idVideoPlayer" ).attr( "src", "http://www.youtube.com/watch?v=gCAcU3p9GNo&hl=en_US&fs=1&rel=0&hd=1&border=0&enablejsapi=1");
                      

Select all Open in new window

Working code for browsers on Android phones
BUT, the dynamic video content changing doesn't work on ANDROID phones. Iframes saves day for us here, and you can make it work on Android using the following code in that case

var videoURL = "http://www.youtube.com/embed/gCAcU3p9GNo";
                      var videohtml = '<iframe width="96%" height="75%" src="' + videoURL + '" class="youtube-player" frameborder="0"></iframe>';
                      
                      //iframe-video-container is the id of the element in which iframe will be set
                      $("#iframe-video-container").html(videohtml);
                      

Select all Open in new window

Other browsers

Source code snippets mentioned above have been tested on older version of Firefox as well. It has not been tested on latest versions of Firefox, IE and Opera. However, since youtube works fine of all these browsers, so this code should work perfectly fine on them too.