I was working on adding a few features to a pet project – one of them was allowing users to add a youtube video to their profile page. In order to this though, we need to get familiarized with youtube and a few parameters we already know.
A commonly known parameter is autoplay, if we set this to “1” – the youtube video will play automatically on an initial page load.
The general structure is illustrated below, get familiar if you aren’t already – this is a pretty cool feature.
Note that the following URL will have to be inserted into an iframe and the “embed” parameters is needed in order for this to work (well it may work anyway) but this ensures a proper URL for embedding youtube videos to your page.
A basic youtube iframe embed.
<iframe src="https://www.youtube.com/embed/VIDEO_ID_HASH_HERE" frameborder="0" height="400" width="400" allowfullscreen></iframe>
This is what it would look like with additional parameters appended to it.
<iframe src="https://www.youtube.com/embed/VIDEO_ID_HASH_HERE?autoplay=1&loop=1&playlist=VIDEO_ID_HASH_HERE" frameborder="0" height="400" width="400" allowfullscreen></iframe>
The VIDEO_ID_HASH_HERE placeholder denotes the hash found on your youtube video. In this example, there are two placeholders. Don’t get confused, just use the same hash and you’re good.
Parameters Explained
- loop=1, enable the video to loop automatically
- autoplay=1, enable the video to play on page load
- playlist=VIDEO_ID_HASH_HERE, where
is the youtube hash
An important note, the playlist parameter is needed for the video to loop automatically. I wrestled with this for a while but found that both loop=1 and playlist=
Maybe the folks at youtube are working on changing this, but for now I think this is a pretty good treat. If you’re looking into utilizing their API, this is also an alternative method. I’ll be covering that particular topic in a future post.