I have a YouTube's player in the webpage. I need to change the video played by this player dynamicaly.

This is (relatively) easy using YouTube's chromeless player. It has method loadVideoById() which works perfectly. The problem is, that the chromeless player doesn't have any controls (play/pause, etc.). The regular YouTube player has all this, but it doesn't have the loadVideoById() method.

Is there any way to include the controls of regular player into chromeless player, or to implement loadVideoById() method in the regular player?

Thanks.

I have a YouTube's player in the webpage. I need to change the video played by this player dynamicaly.

This is (relatively) easy using YouTube's chromeless player. It has method loadVideoById() which works perfectly. The problem is, that the chromeless player doesn't have any controls (play/pause, etc.). The regular YouTube player has all this, but it doesn't have the loadVideoById() method.

Is there any way to include the controls of regular player into chromeless player, or to implement loadVideoById() method in the regular player?

Thanks.

• javascript
• api
• youtube

• WARNING: sometimes Google appends a &ltr; marker to the end of a YouTube ID (such as in search results page). if you accidentally copy it - this invisible character will give you 'Invalid Parameters' error when you try to use loadVideoById(). Use the cursor keys to make sure there's no invisible characters at the end of any Video IDs – Simon_Weaver Commented Jul 2, 2013 at 0:43
• also remember that on iOS you can't start a youtube video (or any HTML5 video) without explicitly clicking play. If you call loadVideoById() you must first check that the video is playing or it'll just go to a black box – Simon_Weaver Commented Jul 2, 2013 at 1:05

4 Answers 4

You can not do that, cause the calls in the "regular youtube player" have the VideoID in the URL instead as a parameter:

• Regular Video: http://www.youtube./v/VIDEO_ID&enablejsapi=1&playerapiid=ytplayer
• Chromeless: http://www.youtube./apiplayer?enablejsapi=1

Instead of that you can easily create your own function that changes the Embbebed SWF, i mean, say that you are using swfobject for the "Regular Player", then using createSWF function you will be able to replace the previous video for the actual one dynamically.

Hope this help you.

You can do this...

http://code.google./apis/ajax/playground/#change_the_playing_video

FYI there also a jQuery plugin that can do it for you, and provide you with a ton of controls!

http://tikku./jquery-youtube-tubeplayer-plugin

https://github./nirvanatikku/jQuery-TubePlayer-Plugin

I found it easier to use loadVideoByUrl() as an alternative to loadVideoByIdl() instead of using createSWF, you don't have to mess with the swfobject this way, it's a built-in function...just use the video ID to create a youtube swf url such as: url="http://www.youtube./e/" + VIDEO_ID + "?enablejsapi=1&version=3" and submit using the loadVideoByUrl() function like this: player.loadVideoByUrl(url)

That way you don't have to mess with the swfobject, it's spelled out here:

http://code.google./apis/youtube/js_api_reference.html#loadVideoById

"player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void Loads and plays the specified video.

    * The mediaContentUrl must be a fully qualified YouTube player URL in the format http://www.youtube./e/VIDEO_ID. In YouTube Data API video feeds, the url attribute of the <media:content> tag contains a fully qualified player URL when the tag's format attribute has a value of 5.
    * startSeconds accepts a float/integer and specifies the time from which the video should start playing. If startSeconds (number can be a float) is specified, the video will start from the closest keyframe to the specified time."