Youtube autoplay URL
Attach parameters to the Youtube iframe URL to modify its behaviourWe can make some changes to an embedded Youtube video's behavior just by attaching parameters to the end of the Youtube URL inside the iframe. The following for example causes the video to automatically play when it's loaded: Show
We attach autoplay=1 to a question mark following the original Youtube URL in this case. Refer to Google's Youtube Embedded Players Parameters page for the full list of supported parameters. Here are some of them:
The next example does of all the following just by attaching parameters to the iframe video URL:
Play With Code Try modifying the parameters to see the difference. A quick overview of using Youtube API to embed and manipulate a videoAttaching parameters to the Youtube Iframe's URL can only get you so far in manipulating the video. For more serious shenanigans, we'll want to tap into Youtube iframe Player's API. The API works on an existing Youtube Iframe or one that's dynamically served using JavaScript instead. For maximum versatility, however, go the later route, which lets you dynamically add or remove the Youtube iframe on demand. Loading the Youtube Player API and a video dynamicallyFirstly, to load a Youtube video dynamically using Youtube Player API, we do the following 3 things: Step 1: Add an empty DIV on the page where you wish the Youtube iframe to appear on the page. The iframe will replace this temporary DIV when loaded: Step 2: Load the Youtube Player API asynchronously in JavaScript, following the DIV above: This is similar to loading the Youtube API synchronously by physically adding a except the former code is non blocking. Step 3: And finally, define a onYouTubeIframeAPIReady() function that the Youtube API will call automatically once the API has loaded, and initialize a new Youtube Player inside it to show the Youtube video in place of the DIV of step 1: See Example Do not modify the onYouTubeIframeAPIReady() function name, as this is what the API expects and will call once it's properly loaded. Inside onYouTubeIframeAPIReady(), invoke new YT.Player() and assign it to an arbitrary but unique variable (ie: "player") so we can manipulate this player further afterwards. In the above demo, we've passed the following parameters to YT.Player():
Keeping track of the video stateOnce a Youtube video has been loaded via the API, a vital piece of information to know is the current player's state. For example, by default when the video has just loaded but isn't playing, its state is "unstarted" (-1). When it's playing, its state changes to "playing" (1) etc. Knowing the current player's state allows you to react accordingly. The possible state values are:
There are two ways to get the current state of the player- using the method player.getPlayerState(), or by checking the parameter event.data inside any of the API event handlers, for example: events: { 'onReady': function(event){ console.log(event.data) }, 'onStateChange': function(event){ console.log(event.data) } }Try adding console.log() to these two events handlers inside the original Youtube API Player example and view your console to see the value returned based on the current state of the player. Youtube Player API methodsOnce a Youtube video has been loaded via the Youtube API, you can call methods on the player instance to perform operations on it, such as:
In the above case, "player" is the variable you assigned new YT.Player() when initializing it. Refer to the documentation for a full list of supported methods. When calling these methods, make sure the Youtube player in question has initialized first- one way to ensure this is to call these methods inside the 'onReady' event handler of the player. The following example loads a Youtube Player that automatically plays when the page loads. Furthermore, if the user scrolls down the page and past the video it pause the video, and resumes playing if the video is scrolled back up into view We'll enlist the help of jQuery to easily determine the coordinates of the player on the page See Example As you can see, inside the "onReady" event of the Youtube Player instance, we get the vertical offset of the youtube iframe relative to the document, and as the user scrolls the page, compare that value to the current vertical scrollbar position. Based on whether the user has scrolled past the video or not on the page, we either play or pause the video, taking into account the video's current state as well using player.getPlayerState(). Playing a video on Mobile Devices- in particular iOS devices- issue and workaroundYouTube API's documentation mentions the limitation of its player on mobile devices: "The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction. Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments." This seems fairly innocuous- it simply tells us that Youtube API's "play" related methods on mobile devices will have no effect when called, with an explicit action by the user required to play a video. HOWEVER, we've found that on iOS devices (iPhone, iPad etc), there is currently a nasty side effect when calling any of Youtube API's play methods, such as:
On iOS devices (at time of writing), calling these methods not only doesn't play the video (as expected), but seems to put the video in perpetual "buffering" mode, with the "spinning" loader always appearing above the video and rendering it inoperable. To work around the above debilitating bug, whenever we need to call a "play" related Youtube method, we should first detect whether the device is iOS, and if so, use Youtube API's "cueing" methods instead, such as:
These methods do not attempt to play the video in question, merely loads it into the video player, ready for the user to manually play it. The following example shows how this looks like in practice: var isiOS = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) != null //boolean check for iOS devices if (isiOS){ // if iOS device player.cueVideoById('video_id') } else{ // non iOS devices, just try to play video player.playVideo() }Creating a simple Youtube lightbox |