YouTube embed options are a great way to get a more professional look from your embedded videos. The trick is to understand what codes to use and how to insert them into YouTube’s embed code. YouTube doesn’t make it so simple to do, though. This is a short tutorial to go over some of my favorite options to personalize your embedded video.
This post was inspired in part by Ellen Bremen’s wonderful video post yesterday (if you haven’t seen it you need to check it out). My intention was to make the video play automatically, to take away all of the visible bars and controls, and to hide suggested videos after the video completes. So here’s how I went about it:
YouTube embed options: how to find the basic embed code
Once you have a video hosted on YouTube that you want to embed on your site, you simply have to push “share” and “embed” to get the basic embed code (see the arrow in the illustration).
YouTube embed options: How to customize your embedded video
The key to this is to understand where to input the additional code and what your options are. YouTube gives you a rundown of all of your options on their developers site, though I’m only going to discuss a few.
The “autoplay” function allows for a video to immediately start when a page loads. (the value “1″ enables this). To insert this into the embed code, you would simply use the “?” character and then “autoplay=1″
<iframe width="640" height="480" src="http://www.youtube.com/embed/usi8OvRSGs0?autoplay=1" frameborder="0" allowfullscreen>iframe>
The “controls” function allows you to hide or show the video controls. To hide the controls, I insert the character “&” and then “controls=0″ immediately after the last code entered.
<iframe width="640" height="480" src="http://www.youtube.com/embed/usi8OvRSGs0?autoplay=1&controls=0" frameborder="0" allowfullscreen>iframe>
The “showinfo” code shows and hides the YouTube header bar. To hide the info bar, I insert the character “&” and “showinfo=0″
<iframe width="640" height="480" src="http://www.youtube.com/embed/usi8OvRSGs0?autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
Finally, in order to remove related videos from the end of the video I insert “&” then “rel=0″ like this:
<iframe width="640" height="480" src="http://www.youtube.com/embed/usi8OvRSGs0?autoplay=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
Selfish motives
In the spirit of full disclosure I should share my selfish motivation for this post: I needed to put all of this in one place so that I don’t have to look it up everytime I post a video. If you have favorite YouTube embed options to help me or others out, please leave a comment and share them!
