<

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

Published on
60,088 Points
53,588 Views
Last Modified:
Approved
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>';

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" );

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");

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

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.
0
Comment
0 Comments

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month