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