How to Optimize your YouTube Video Embeds

- 34 Comments

In today’s Customer Spotlight we are excited to introduce you to Matt Ballek over at VIDISEO. Aside from having a killer X-powered site, Matt is an incredible educator on two very popular topics – Video and SEO. In a Themeco Spotlight first, Matt put together a great video tutorial on optimizing your YouTube embeds plus he’s giving away three of his most used Cornerstone blocks for free!

Introduction

Embedding videos on your website can increase visitor engagement, time on site, and conversions. Plus any embedded views you receive are added to your total YouTube view count.

Making a few tweaks to YouTube’s embed code can help your videos look and perform better on your website.

Getting Setup in X

When editing a page or post X makes it easy to embed a YouTube video thanks to the Embedded Video element in Cornerstone. Once you drag the element into your design you’ll have the option of adding a video embed code.

image05

You can find the embed code of any YouTube video directly on its watch page. Just click on ‘Share’ and then ‘Embed’. This will show the embed code you can copy and paste into the embed code box of your video element. Once you do that your preview will update automatically.

Next, I like to turn on the “No Container” option so my embedded video takes up all the space in the column. For a basic video embed, that’s all you need to do; However, there are a few things I’d like to change.

First, the embedded player shows the video title at the top which can get in the way of your video if a viewer hovers over it.

image04

Also, once the video ends the player shows a number of related videos. Since these video could be from another channel, I’d like to stop them from appearing altogether. Thankfully we can make some changes to the embed code to do exactly that.

image01

Editing the Embed Code

Looking at the embed code, you’ll see a YouTube URL in quotes. We’re going to add additional parameters to that URL to change the look and feel of the embedded player. Don’t be thrown off by the word “parameter” it’s a lot easier than it sounds.

When adding parameters the first one always begins with a question mark, and each additional one begins with an ampersand.

image06

So the first parameter I add to the end of the video URL is the “REL=0” parameter, starting with a question mark since it’s the first parameter. Now when my video finishes, no related videos are shown. The next parameter I like to add is “showinfo=0”. That removes the title bar from the top of the video. I think it looks cleaner and makes my thumbnail standout on the page.

Lastly, the “autohide=1” parameter hides the player controls until you mouse over the video. So that leaves you with a really clean looking embed that doesn’t serve up other people’s videos.

So, here’s what my embed code looks like now with those three parameters added.

image03

There are no spaces in the URL and it still sits comfortably inside quotation marks. I just started my first parameter with a question mark and each additional one with ampersands.

There are a number of other parameters available that I didn’t use, but you can see a full list of parameters here.

Getting Templated

Now that we have our video sitting pretty I doubt you’re going to want to go through those steps every time you add a video to a page. So, once I have my player the way I want it I save it as a block template in Cornerstone.

Now when I’m working on another page I can easily insert that block into my layout by going into my templates and selecting the block I saved.

You can then swap out the embedded video by replacing the video ID. If you look at any Youtube video URL you’ll see a ?v=. The string after that is the video’s ID.

image02

Copy that ID and replace the ID in the embed code which sits between the /embed/ and the question mark of the first parameter.

image00

Once you do that the video will update, and all the customizations will remain the same!

I created 3 video block templates that I use on my website and they have saved me a ton of time. You can grab a copy of my cornerstone video embed templates for free.


About Matt Ballek:

Matt is a certified YouTube consultant and founder of VIDISEO.

He has 10 years of YouTube marketing and SEO experience and has been responsible for developing, communicating and implementing advanced video strategies for numerous brands including Lowes, Google, The Associated Press, PBS, and Intel.

Matt also provides a free YouTube training course to help channels kickstart their audience growth on YouTube.


Interested in possibly being part of a future Themeco Customer Spotlight? We’re looking for awesome people doing great things with X or Cornerstone. If that’s you, we’d love to hear from you.

34 Comments on “How to Optimize your YouTube Video Embeds”

  1. Tiffany

    Great tips-I love your video! Thanks for sharing the cornerstone blocks!

    Here is a shortcut–
    YouTube will generate that embed code without the video title and suggested videos if you press “show more” under the box where you grab the embed code from. Then select the desired configuration.

    1. VIDISEO

      Thanks Stephen!
      To add any of the block templates simply navigate to the layout tab of any page/post you are working on. From there, click on ‘Templates’ and then “Upload”. You’ll be prompted to choose a file, so just pick the template you’d like to use from my zip file. Lastly you’ll be prompted to add the template as a page or block. Go ahead and select block so you don’t overwrite the entire page.

      Hope that helps!

  2. VIDISEO

    Hey, Matt here from VIDISEO!

    If you have any questions, comments, or motivational quotes just let me know. I’ll be hanging out on this page for days (maybe even months).

    Excited to be a part of X’s customer spotlight!

  3. Josh

    Hi there! I tried applying this code to not show related videos on my playlist embed code but it does not work. After the last video in my playlist finishes, YouTube still shows related videos that I do not want to show. I also do not have the option to uncheck the box that says “show related videos”. It’s not there. Any advice?

    1. VIDISEO

      I’d have to take a peek at your embed code to see if everything is in the right place. If you wouldn’t mind sending me a link to the page or paste your code as a reply I’d be happy to take a look at it.

    2. Tom

      Hi did you ever figure this out with the playlist – I am having same issue.
      I cannot get the related videos to go away. (Issue is specific to playlist)

  4. Kev

    Thanks Matt! I was just wondering your thoughts on vimeo as an alternative in terms of SEO and if this type of customisation is also possible?

    1. VIDISEO

      In terms of straight SEO I prefer to use YouTube over Vimeo if only for the Google connection and the fact that YouTube is the 2nd largest search engine after Google.

  5. Nico

    Love this, thank you. I don’t use video much but had to embed some for a client the other day and it took me a long time to work out how to remove those unwanted bits!

    Just one thought though. In addition to this wouldn’t it be a great idea to actually open the video in a lightbox and use a locally saved placeholder as the video still, thus saving the initial external requests on page load until the video is actually chosen?

    Perhaps that could be the subject of the next episode? 😉

    1. VIDISEO

      Template pages/blocks have been my new favorite feature of X/Cornerstone. I’d still be designing individual lesson pages if it wasn’t for templates.

  6. Branko

    Matt, this was great, and pretty witty :). I embedded a couple videos to a client’s site last week and now I’m going to add your parameters. Thank you much!!

  7. Pamela

    Thank you so much for these tips. I have two sites using the X Theme and love it. It took me a little while to get used to it but I now find Cornerstone so easy to use. I’m looking forward to trying this out. Thanks again 🙂

    1. Themeco

      Hi Markian,

      There is no native Element for a YouTube gallery, but you could certainly embed videos in various orientations to create your own.

      Cheers!

  8. Allison

    I am trying to embed a YouTube video into my website and do not want suggested videos to show at the end. In the embed options on YouTube I do not see the check box to uncheck “Show suggested videos….”. So I tried adding ?rel=0 after the URL with no success. I still see related videos. I have lost so many hours trying to figure this out. HELP!

Leave a Reply

Your email address will not be published. Required fields are marked *