3 Wicked YouTube Tricks To Customize Your Embedded Video

Table of Contents

Have you ever wanted to get more control of your Youtube videos when embedding them? You are not alone! Recently, I was working on a pay per click landing page that needed to utilize several videos that would need to be launched in their own pop-up overlay. Initially, I was going to look for a server based solution to allow for the flexibility I was looking to have for these videos. However, after some research I was able to use YouTube embedded videos to accomplish what I wanted through adding special parameters in the embed code. The key pieces of video player customization I needed were:
  • The videos to autoplay upon the loaded overlay
  • Hide the video controls
  • Loop the video to replay once it was complete
Here are the parameters I used to accomplish what I needed and how you can do the same so that you have more control over your YouTube embeds instead of the stale default (seen below - this is NOT the video I used for PPC - but laugh every time I see this video).

Customizing The Youtube Embed Code

In order to add the embed code, you simply need to add a question mark "?" at the end of the youtube video. If you are going to use multiple parameters, simply add a ampersand "&" after the first parameter you added. For example, your YouTube embed code will initially look something like this:
  • <iframe width="560" height="315" src="http://www.youtube.com/embed/USHZZ5bwASU" frameborder="0" allowfullscreen></iframe>
You will simply need to add the ampersand for the first parameter and then a question mark prior to any additional parameters. So it would technically look something like this:
  • <iframe width="560" height="315" src="http://www.youtube.com/embed/USHZZ5bwASU?PARAMETER1&PARAMETER2" frameborder="0" allowfullscreen></iframe>

YouTube Autoplay

Quite simply, this helped me accomplish the first piece of functionality I was after. The code you will need to use for this parameter is "autoplay=1".  Since this is the first parameter I will be adding to the embed code, we will need to prefix it with a question mark. Therefore, the full embed code will look like this:
  • <iframe width="560" height="315" src="http://www.youtube.com/embed/USHZZ5bwASU?autoplay=1" frameborder="0" allowfullscreen></iframe>
Using this code, the video will automatically play upon page load. In my case, I had the video embed code inside a popup/overlay therefore it would autoplay when the overlay was opened.

Hiding The Video Controls

There may be a time where you don't want to allow for a user to start, stop, or pause a video. In order for you to implement this function, you will need to use the parameter "controls=0". Since this is the second parameter, we will place it after the first parameter but will use a ampersand before it. The full embed code would be as follows:
  • <iframe width="560" height="315" src="http://www.youtube.com/embed/USHZZ5bwASU?autoplay=1&controls=0" frameborder="0" allowfullscreen></iframe>
You will need to use this particular option sparingly as it could lead to a frustrating user experience if implemented inappropriately.

Loop The Video Playback

The final YouTube trick I am going to discuss is how to loop the video playback. By implementing this parameter you will basically have the video repeat itself indefinitely. To implement this function, we will use the parameter "loop=1". However, it is important to note that in order for the loop function to work, we need to utilize a playlist that only contains this single video. Once you have created the playlist with the video, we will need to add the playlist ID to the embed code via the "playlist=XX", where "XX" is the ID of your playlist. Again, if we add it to our previous example, these will need to be preceded by an ampersand so that it looks like this:
  • <iframe width="560" height="315" src="http://www.youtube.com/embed/USHZZ5bwASU?autoplay=1&controls=0&loop=1&playlist=XX" frameborder="0" allowfullscreen></iframe>

What Do You Wish You Could Do?

YouTube has many options for embed code customizations. Which ones have you used? What would you like to do but don't know how? Sound off in the comments and I will do my best to help.
  • Yung Yada September 22, 2012

    http://youtu.be/6ShszuxUC7g?autoplay=1” frameborder=”0″ allowfullscreen>

  • Jason@MechaDigital January 17, 2013

    I wish you could enable HD for smaller sized embedded videos. This was lost when they changed their embed code last year. I’ve been using Vimeo a lot more as a result.

    • Chris Makara January 18, 2013

      Hi Jason, I have used Vimeo, but it was years ago…I may need to visit them again 🙂

  • Jason@MechaDigital January 19, 2013

    Hang on, I stand corrected. Just found the updated code to force HD… &vq=hd720

    Add that to the list 🙂

  • Rsaofyap March 15, 2013

    It would be nice to embed a YouTube video in the banner of a web page so it plays automatically as soon as someone opens your web page, and then, when the YouTube video finishes your web page is restored and where the YouTube video had been is a banner picture.

  • An dre November 22, 2013

    thats great – I knew all that – but i also knew so many people asking for autostart and loop and there are so many wrong answers in the web (in german forums – i am from germany) – I think I wil link that in my Blog. 🙂

    • Chris Makara November 23, 2013

      An dre thanks for taking the time to comment. Yes, there is quite a bit of misinformation out there…I can’t imagine how much it gets misconstrued across a different language.

  • Andy February 6, 2014

    Everything but the loop worked. Have things changed since HTML5 or should it work just the same?

Leave a comment