Update: Check out Vladimir Sobolev’s Youtube Embed Player Customizer for way more options and a coding-free method of customization.

As the third most-visited site on the web, YouTube is unquestionably the most popular method of online video distribution. YouTube does have its strongpoints: anyone can post an unlimited number of videos for free, basic analytics are included, and with hundreds of millions of users, it’s likely your video will be viewed and shared by those who would otherwise never find it. As with other video hosting services, it is possible to embed videos from YouTube on web pages, blogs, etc., provided that the uploader of the video allows it. However, by default, an embedded YouTube video looks cluttered and unsightly when compared to embedded videos from rival services Vimeo and Wistia. Below are examples of embedded video from each service, without using any custom parameter code in the embed HTML.
 

Wistia keeps it clean and simple. A simple ‘play’ indicator in the middle is all that’s needed to indicate an embedded video.
 

Vimeo provides checkboxes to disable the majority of the clutter from the embed, resulting in a fairly clean interface that blends with most any site design.
 

YouTube‘s default embed forces the title link, share options, more info box, and watch later option all to be displayed. Thankfully, we can dramatically improve the visual presentation of the embed with one easy modification

Adding the “showinfo=0” and “&autohide=1” Parameters

How parameters work

Nowadays, YouTube videos are generally embedded via the <iframe> HTML tag. By clicking “Share”, then “Embed” on any video’s page on YouTube. URL parameters are used in a parameter=value format. By default, one URL parameter (rel) is included, and its value is set to 0 (ensure the “Show suggested videos when the video finishes” checkbox is unchecked in the “Embed” section on YouTube). Here is the default YouTube embed code:

<iframe width="560" height="315" src="http://www.youtube.com/embed/j7xiyPEWkrg?rel=0" frameborder="0" allowfullscreen></iframe>

Adding the parameters

Simply adding “&showinfo=0&autohide=1” to the end of the <iframe> src attribute will give a considerably cleaner look. The “showinfo” parameter dictates whether or not the top bar containing the title and share options is displayed, while the “autohide” parameter determines whether or not the play controls are visible when the video is not being played. The new code would be:

<iframe width="560" height="315" src="http://www.youtube.com/embed/j7xiyPEWkrg?rel=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>

Here is the result:

Now we have a more minimalist presentation, similar to Wistia’s. If you’d like to make better use of video on your company’s website, drop us a line. We’ll help you determine the best approach in using video to entertain and inform visitors to your site, and show you how video can be a sales-driving, measurable, and dynamic tool for your business.