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
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>
- <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>
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>
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>
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 🙂
Chris Makara January 21, 2013
Nice find! I will get it added 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?
Chris Makara February 9, 2014
Andy – thanks for taking time to leave a comment.
According to the support docs, it looks like you have to add the playlist tag and use the video ID for it to make it work for a single video – see https://developers.google.com/youtube/player_parameters#loop