How to Embed a Square YouTube Video That Plays In an Infinite Loop
I shot a square video with Hipstamatic's Cinamatic, an iPhone app I use to create 3- to 15-second filtered clips that I can share to Vine, Instagram, and Facebook. I wanted to embed my video in an infinite loop on my website without using Vine, so I uploaded the video to YouTube, but YouTube presented me with two problems:
- Cinamatic videos are square and YouTube's player is not, so I had to contend with ugly black bars on either side of my video, and
- YouTube videos play once through by default without obvious settings to share them as infinite loops.
It was time to get to work, because this world needs less ugly video displays and more looping videos.
How to Change the Aspect Ratio of a YouTube Video Player So It Fits the Size Your Video
The original embed code I copied from YouTube looked like this:
<iframe width="640" height="480" src="//www.youtube.com/embed/1onw8rSfDsg" frameborder="0" allowfullscreen></iframe>
The ratio of width to height specified in the above code works for your average video's aspect ratio, but it doesn't conform to a square video. After some fiddling, I realized that the height is the issue here. Through trial and error, I increased the height until it was 36 pixels taller than the width, which allows for the video's square aspect ratio plus some extra room for the player's controls,
Our new embed code with the adjusted height looks like this:
<iframe width="640" height="676" src="//www.youtube.com/embed/1onw8rSfDsg" frameborder="0" allowfullscreen></iframe>
And, voilà! Now the YouTube video player fits the desired aspect ratio of my video with very little work.
Now we have to get it to play in an infinite loop.
How to Embed a YouTube Video That Plays In an Infinite Loop
The next problem I had was that I wanted my video to play in an infinite loop, but YouTube only plays videos through once and then stops or moves on to another video. I did some hunting around and found Google Developers' YouTube Embedded Players and Player Parameters. Here you can find a list of parameters to add to the url in the embed code to make your player behave in different ways.
The two parameters required for an infinite loop in a YouTube video are:
- loop=1, which makes the video loop continuously, and
- playlist=VIDEO_ID, which tells the video what video to play next. "VIDEO_ID" needs to be replaced with the correct ID, which you can find already in the YouTube url. For example, the YouTube embed url in my code is www.youtube.com/embed/1onw8rSfDsg, and the VIDEO_ID is the bolded part of that url.
When you add parameters to the end of a url, you add a ? to the end first, and then you put an & in between each parameter. Our new embed code with the two new parameters added onto the url looks like this:
<iframe width="640" height="676" wmode="transparent" src="//www.youtube.com/embed/1onw8rSfDsg?loop=1&playlist=1onw8rSfDsg" frameborder="0" allowfullscreen></iframe>
Now we have a square aspect ratio YouTube player that plays a video in an infinite loop!
How powerful do you feel now?
EXTRA: Fancy Pants YouTube Player Aesthetic Changes You Can Make
I wandered through the YouTube Embedded Players and Player Parameters and added a few more parameters to enhance my viewers' experience. On top of "loop=1" and "playlist=VIDEO_ID", I also added:
- theme=white, which lightens the lower player controls bar,
- color=white, which changes the YouTube progress bar from its default red to white, and
- autohide=1, which hides the player controls unless you hover over the video with your pointer while it's playing.
Our new embed code with the three extra parameters added onto the url looks like this:
<iframe width="640" height="676" wmode="transparent" src="//www.youtube.com/embed/1onw8rSfDsg?loop=1&playlist=1onw8rSfDsg&theme=light&color=white&autohide=1" frameborder="0" allowfullscreen></iframe>
Now we have 1) a square YouTube video player that 2) plays video in an infinite loop and 3) has a nicer looking control bar that hides when we're not using it.
You are pretty much demi-gods of better-looking content now that you can display your videos more beautifully. Go forth!