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:
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).
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:
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:
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:
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.
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:
You will need to use this particular option sparingly as it could lead to a frustrating user experience if implemented inappropriately.
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:
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.
http://youtu.be/6ShszuxUC7g?autoplay=1” frameborder=”0″ allowfullscreen>
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.
Hi Jason, I have used Vimeo, but it was years ago…I may need to visit them again 🙂
Hang on, I stand corrected. Just found the updated code to force HD… &vq=hd720
Add that to the list 🙂
Nice find! I will get it added to the list:)
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.
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. 🙂
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.
Everything but the loop worked. Have things changed since HTML5 or should it work just the same?
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