<iframe width="640" height="480" src="//www.youtube.com/embed/usi8OvRSGs0?autoplay=1" frameborder="0" allowfullscreen>iframe><iframe width="640" height="480" src="//www.youtube.com/embed/usi8OvRSGs0?autoplay=1&controls=0" frameborder="0" allowfullscreen>iframe><iframe width="640" height="480" src="//www.youtube.com/embed/usi8OvRSGs0?autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen>iframe><iframe width="640" height="480" src="//www.youtube.com/embed/usi8OvRSGs0?autoplay=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
What does each YouTube embed parameter look like?
To take this post a step further, I thought it might be helpful to go through each of the embed options and visually show what each addition would do. For your reference, you can find a definitive list of parameters that you can control for an embedded YouTube video: https://developers.google.com/youtube/player_parameters?csw=1. It’s important to note that there are settings specific to Flash players (you can get these embed codes by checking the box for “get old embed code” when getting the embed code for any specific YouTube video), and HTML5. For the purposes of this post, all embed codes are HTML5 compliant (mobile devices won’t display Flash making HTML5 a better solution for most purposes).So I’m going to use the Rick Astley “Never Gonna Give You Up” video (aka the “Rick Roll”) as our example video. So, here is the default embed from YouTube:
***Update 4/30/2014 – since Rick Astley has evidently take down his video from YouTube, I substituted his video with a video of professional wrestler Stone Cold Stone Austin lip-syncing to the song. It’s not the original but it will do.
<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY" frameborder="0" allowfullscreen></iframe>
Autohide
Now we’ll add “autohide.” Autohide has three values, “2” which is the default and video progress bar to fade out while the player controls remain visible, “1” which hides the progress bar and player controls after a few seconds, and “0” which will keep the progress bar and player controls visible always. In this embed, the autohide value is set to “1.” The difference may or may not be especially distinguishable.
<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?autohide=1" frameborder="0" allowfullscreen></iframe>
Autoplay
I discuss autoplay above and for the sake of your sanity I have omitted an example of this. Trust me, it works.cc_load_policy
This allows you to turn closed captions on, even if the user has them turned off by default. The “0” value turns closed-captions off, and the “1” value turns closed-captions on. (For this example we’ll use a different video since Rick Astley’s video is disappointingly not closed captioned).
<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
color
The color parameter dictates the color that the progress bar shows on the video. There are two parameters to choose from: “red” and “white.” Red is the default, so here is an example of the “white” parameter:<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?color=white" frameborder="0" allowfullscreen></iframe>
controls
The controls parameter determines when the controls will display. The “0” setting will prevent controls from showing, the “1” setting is the default and shows controls, and the “2” setting is the same as “1” except that Flash isn’t loaded until the player plays. Here is an example of the “0” setting:<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?controls=0" frameborder="0" allowfullscreen></iframe>
disablekb
The disablekb parameter will disable the keyboard controls. This parameter value is “0” by default, but can be changed to “1” to disable the keyboard controls.<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?disablekb=1" frameborder="0" allowfullscreen></iframe>I haven’t included an embed option as it doesn’t do anything visually to the video. Incidentally, YouTube keyboard controls are as follows:
Spacebar: Play / Pause
Arrow Left: Jump back 10% in the current video
Arrow Right: Jump ahead 10% in the current video
Arrow Up: Volume up
Arrow Down: Volume Down
enablejsapi
The enablejsapi allows you to enable the Javascript API to control the YouTube player. If you need this parameter (which is “1” to enable and “0” by default incidentally), stop reading this post – you probably don’t need it. :)
end
The “end” parameter enables you to determine a duration (in seconds) that your video will play and then conclude. Note that the time is from the beginning of the video and not from the complementary “start” parameter that I’ll discuss in a moment. Note that YouTube says this doesn’t work for HTML5, but it appears to be working in this two-second example:
<iframe src="//www.youtube.com/embed/TXiENNKkVzY?end=2" height="480" width="640" allowfullscreen="" frameborder="0"></iframe>
fs
The fs (fullscreen) parameter is another embed parameter that doesn’t work with HTML5. It allows you to hide the fullscreen button. It is set to “1” (display) by default, but can be set to “0.”iv_load_policy
The parameter “iv_load_policy” determines whether or not video annotations will be shown. There are two values: “1” and “3,” where “1” (the default setting) shows video annotations and “3” does not. Fortunately, the Astley video has some annotations so you can see the difference between the two. Here is an example where video annotations aren’t shown:
<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
list and listType
List and listType are Flash-specific commands to determine and control a video playlist. Because the “playlist” command works for HTML5 as well, it’s probably a better tactic to use that parameter to create a playlist so I’ll skip over these.loop
This setting allows you to set your video to repeat ad infinitum. The “0” value is the default (stop at the end) value, and the “1” value will create a loop. For giggles, I’ll embed the Astley video with loop enabled (though I hope nobody will need to watch it a bunch to find it helpful :) ). You’ll note in the code that in order to make “loop” work it should be used in conjunction with the “playlist” attribute.<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?loop=1&playlist=TXiENNKkVzY" frameborder="0" allowfullscreen></iframe>
modestbranding
The modestbranding setting allows you to show your videos without the YouTube logo showing. You’ll notice that the YouTube logo goes away but it’s not as incognito as you might imagine. In any event, the value to turn on “modest branding” is “1.”<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?modestbranding=1" frameborder="0" allowfullscreen></iframe>
origin and playerapiid
These two functions are used in conjunction with the Javascript enable. Since I don’t know too much about this aspect of YouTube embeds I’ll skip these for now.playlist
The playlist function allows you to play a prescribed list of sequential YouTube videos in your embed. It’s pretty simple to use, after the playlist command you list the IDs of the videos that comprise your list each separated by a comma (note that if you mention the first embedded video in the list it will play twice). This is a video list of Rick Astley videos – if you watch carefully you may come to the same conclusion that I have that he was Robin Thicke before Robin Thicke was Robin Thicke…. but I suppose that’s an ad sequitur to the embed option post:<iframe width="640″ height="480″ src="//www.youtube.com/embed/TXiENNKkVzY?playlist=0oicc86PwEM,lq2zHpcLBXI,MkYGDzO_2hs,WepArag_IUc" height="480" width="640" allowfullscreen="" frameborder="0"></iframe>
rel
The “rel” parameter determines whether you want to show related videos at the end of your video or playlist. The default is “1” for yes, and conversely the value of “0” will prevent related videos from being shown at the end of the embedded video. Here is an example:<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?rel=0" frameborder="0" allowfullscreen></iframe>
showinfo
The showinfo parameter determines whether the video information is presented before the video is played. The “1” value is default, and “0” value hides the video information as such:<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?showinfo=0" frameborder="0" allowfullscreen></iframe>
start
The start parameter determines the spot where the video will begin playing (measured in seconds from the beginning of the video). Recall that this can be used in concert with the “end” function, but both parameters are measured in seconds from the beginning of the video. Here is an embed of the Rock Astley video where a bartender does a backflip (102 seconds in):<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?start=102" frameborder="0" allowfullscreen></iframe>
theme
The theme parameter allows you to choose either a dark or light theme for your embedded video player. The “dark” value is default, and here is an example of the “light” value:<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?theme=light" frameborder="0" allowfullscreen></iframe>
Putting it all together
So, I thought it might make sense to put some of these parameters together to show how they work in concert. In this example I hid the video information, hid the notes throughout the video and hid the video controls. Note that these parameters don’t work well with the modestbranding parameter so I couldn’t include it. The result is a very clean looking embed and optimal viewing experience for fans of Rick Astley:
<iframe width="640" height="480" src="//www.youtube.com/embed/TXiENNKkVzY?showinfo=0&iv_load_policy=3&controls=0" frameborder="0" allowfullscreen></iframe>If you have anything to add, please feel welcome leave a comment. And if this was of use to you, please take a moment to share this with others on your social networks. Happy embedding!
0 Nhận xét