Make YouTube Videos Look Great
YouTube does a lot of things well, and most of the time it’s a handy way to get a video on your website. One area where they fall short, is the way embedded videos look. As designers, we spend a ton of time making sure a web site looks great, then BAM! embed a video and it all goes to hell. Colors, controls, fixed widths, and settings (like showing related videos of your competition at the end of a video) all conspire to ruin a beautiful thing.
The standard YouTube embed looks like this:
Fortunately, there are ways to modify the way embedded videos look and function. The only thing we can’t do with YouTube parameters is make the video embed responsive, but that can be handled with some clever CSS (Here’s a post by Rachel McCollin that will explain how to make iframes responsive).
Another key detail to make YouTube videos look great
It would be lame to go through all the trouble to make your embedded YouTube player look good, then roll with the standard cover image that YouTube selects. Make your own custom cover photo. Not only will it look better, but it’s also an opportunity to include additional information like titles, a call to action, and your own branding.
Skip the details
If you don’t care why it works and just want the code to make it look good, add this text string to the end of the src url: ?modestbranding=1;controls=0;showinfo=0;rel=0;fs=1
With the modified YouTube video parameters
This will hide everything and give you the cleanest looking embed by hiding the controls, eliminating the video title from the header, and removing the related videos from the end.
For those of you that like to know why
There are lots of parameters YouTube provides that allow us to modify the way videos function and are displayed, but there are 5 in particular that will handle most of what you’ll use. A complete list can be found here: https://developers.google.com/youtube/player_parameters
One last thing
One last note before diving in to the parameters; there are two important connectors that need to be included for this to work. First, you must add a ? after the last character of your url before adding the parameters. Second, separate each of the parameters with a ;. For example, the standard url for our Hosting Deficiency Syndrome Video is:
www.youtube.com/embed/CFHW7jkQsZc,
to that we added the string:
?modestbranding=1;controls=0;showinfo=0;rel=0;fs=1,
giving us a combined string that looks like this:
www.youtube.com/embed/CFHW7jkQsZc?modestbranding=1;controls=0;showinfo=0;rel=0;fs=1
The Big 4
Now for the parameters, with a brief explanation of how each one works.
Modest Branding – This parameter controls the display of the YouTube logo. The options are 0 or 1, we almost always set it to 1.
modestbranding=1
Controls – This parameter indicates whether the video player controls will display. Our options are 0, 1, or 2. Default is 1. We almost always change it to 0. If you have a video where you want the viewer to have more control leave this at 1.
controls=0
Show Info – This parameter controls the display of information like video title and uploader. Value options are 0 or 1, set the value to 1 to remove the information from the video.
showinfo=0
Related – This parameter indicates whether the player should show related videos at the end of your video. If you have a lot of related content, sometimes this is a good idea. More often than not it will display videos from other YouTube users, you’ll have to decide what is best for your situation.
rel=0
In Closing
Whether you just want the code or the particulars, fixing how your YouTube videos are displayed goes a long way to keeping your website looking great. Hopefully this info will help make your YouTube video embeds more attractive and suck less.
