如何在移动和桌面网络应用程序上嵌入YouTube视频？

Why host your videos on Youtube?

为什么要在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.

虽然可以使用http://www.keepvid.com之类的网站获取YouTube视频的视频文件URL，但是以编程方式进行操作是您想要传递的问题。 在您的网站上托管视频会遇到很多挑战，例如使这些视频可在多个平台和浏览器上运行，以及确保视频流不会占用视频服务器的全部带宽（由于视频数量庞大）。 YouTube已经在处理所有这些问题，因此将所有视频放到YouTube上并让YouTube处理所有这些问题是很有意义的。

Working code for Safari, Chrome, Iphone and Ipads

Safari，Chrome，Iphone和Ipad的工作代码

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+).

幸运的是，有一种方法可以通过编写与许多浏览器（例如Safari 4 +，Chrome 6 +，Iphone 3+和Ipad 1（iOS3 +））兼容的相同代码在移动应用程序中嵌入youtube视频。

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

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

此标记应在您的网站上嵌入youtube视频，并且已经过成功测试，可以在上述浏览器上使用。

Dynamic update of Youtube video URL

动态更新YouTube视频网址

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

有时，仅以DHTML方式更新视频URL而不是再次加载Object元素是有意义的。 您可以使用以下JavaScript代码进行操作

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

jQuery alternative for dynamically updating Youtube URL

jQuery替代品，用于动态更新Youtube URL

if you are using jquery, then your code would be reduced to

如果您使用的是jQuery，那么您的代码将减少为

$( "#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");

Working code for browsers on Android phones

Android手机上浏览器的工作代码

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

但是，动态视频内容更改不适用于ANDROID手机。 iframe在这里为我们节省了一天，在这种情况下，您可以使用以下代码使其在Android上运行

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

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.

上面提到的源代码片段也已经在较旧版本的Firefox上进行了测试。 尚未在Firefox，IE和Opera的最新版本上进行过测试。 但是，由于youtube在所有这些浏览器上都可以正常运行，因此此代码在它们上也应该可以正常运行。

翻译自: https://www.experts-exchange.com/articles/10080/How-to-embed-a-Youtube-video-on-your-mobile-and-desktop-web-application.html