We very frequently preach about video being an important component of your website, and when available should be an integral part of helping your visitors learn more about you.

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:

    <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:

    <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!

    <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:

    <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:

    <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:

    <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>

Matt Smith

Matt Smith

Matt, quite literally, grew up around television production, and started setting up lights and equipment at just 9 years old. Matt began officially working for Edit House Productions, LLC at a young age and officially joined the team at 15 years old. Matt graduated from Rio Rancho High School in 2010 and attended CNM, taking psychology courses and focusing on general studies and today, he is a multiple Telly Award winning editor. Matt has extensive knowledge of Adobe Premier Pro, After Effects along with the entire suite of Adobe Creative Cloud applications including Adobe Photoshop, Illustrator, InDesign, and Audition. Matt is well-versed in producing, directing, and cinematography.

In 2020, Matt became a Co-Owner of Edit House Productions and Ad House Advertising. In 2022, Matt became the Chief Operating Officer as well. As COO, Matt is responsible for the daily operations of the company. Matt also serves as Studio Manager for Edit House Productions 2000 square-foot studio space

Matt is a huge Stranger Things fan and was ecstatic when Edit House Productions was able to work with Finn Wolfhard on a production in 2021.

Matt married to his high-school sweetheart, Kaitlin in 2013. They enjoy spending time with their daughters, dogs Oliver and Izzy, cooking, cigars, family, and music.