How To Customize YouTube Embedded Videos

Although we use YouTube as the primary video server for our clients’ websites due to its tried-and-true reliability and extensive backing, other services like Vimeo are available… but due to the large userbase, we’ll focus on YouTube.

There are some great ways to improve the default YouTube player on your site, giving you an added level of control over how video will play back:

Using URL Paramaters

Very quickly, here’s how to use URL paramaters. You will see paramaters like rel= prefixed with either a ‘?’ or a ‘&’. These tell the server to which the URL is being sent to prepare the content in a specific way. The first paramater will be a ‘?’ with all following paramaters being ‘&’.

Consider this example below. The first paramater ‘?param1’ is prefixed with a ‘?’ while the following paramaters are prefixed with ‘&’. This is important to note.

<iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?param1=value1¶m2=value2¶m3=value3"
        frameborder="0" allowfullscreen></iframe>

Turn off Related YouTube Videos

What’s more frustrating than seeing a competitor’s video being suggested at the end of your own video? Even worse, it’s on your website! It’s like a competitor is receiving ad space on your own website. When a visitor decides to watch your video content on your site, your video should be the only one presented to them; Well here’s how to make the related videos stop:

    rel=0
    
    <iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?rel=0"
        frameborder="0" allowfullscreen></iframe>

Make Your YouTube Video AutoPlay

(Not Recommended)

While we certainly don’t recommend making your YouTube video play automatically when a visitor visits a page, we do receive the question… and you may have a particular use for it. Here’s how:

    autoplay=1
    
    <iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?autoplay=1"
        frameborder="0" allowfullscreen></iframe>

Turn Off YouTube Title Bar

Turning off the YouTube embed player’s title bar makes your video stand out as different right off the bat!

    showinfo=0
    
    <iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?showinfo=0"
        frameborder="0" allowfullscreen></iframe>

Turn Off YouTube Annotations in Embedded Videos

Annotations can provide a great navigation structure for YouTube content, but when videos are embedded they may be excessive or redundant. Here’s how to remove those pesky YouTube annotations:

    iv_load_policy=3
    
    <iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?iv_load_policy=3"
        frameborder="0" allowfullscreen></iframe>

How To Make A YouTube Video Loop

If you have a quick video that should loop a product demonstration, or you have a page meant to display for looping presentations, here’s how to configure your YouTube video to loop playback:

    loop=1
    
    <iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?loop=1"
        frameborder="0" allowfullscreen></iframe>

Force YouTube Playback to Include Closed Captions

For websites catering to older demographics, it might be helpful to force YouTube closed captions to be on for your embedded video. Here’s how to make YouTube embedded videos always display with their captioning:

    cc_load_policy=1
    
    <iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?cc_load_policy=1"
        frameborder="0" allowfullscreen></iframe>

Pretty Player – Our Suggestion for The Best YouTube Embed Player

This is how we usually prefer to embed our YouTube videos. For YouTube videos with custom thumbnails, this allows the full thumbnail preview to appear, while still visibly identifying to the visitor that this is a video. The YouTube branding is visible if you hover over the video once playback has started. As always, make sure to include the ‘rel=0’ to hide related videos at the end.

    autohide=1    AutoHide the lower bar
    showinfo=0    Hide the top bar
    rel=0         Prevent showing related videos at the end
    
    <iframe width="[WIDTH]" height="[HEIGHT]"
        src="//www.youtube.com/embed/[VIDEO ID]?autohide=1&showinfo=0&rel=0"
        frameborder="0" allowfullscreen></iframe>