Back when music videos starting getting really big on YouTube, a lot of websites popped up that would do something you think YouTube would do for you: loop the video you're playing. Back then, I also didn't know what HTML was, and couldn't even imagine myself making an app like that. Recently, I've been thinking it would make a decent side project and assumed it was a bit of a challenge, since people made full blown websites for it.
Side projects are not my strong suit though, and my laziness defaults to clicking the first result of my search term youtubeonrepeat. For whatever reason, I get an error message: "Playback is currently not available."
Ugh. Well, my case of earworm (gross term, right?) wasn't going away, and I still felt dismayed enough to do something about it. Today I happened to get Gambino's latest music video stuck in my head:
From my limited experience with playing around with the HTML <audio> tag, I figured there was probably a way to whip up something to play it automatically in my browser console. There's a play() and pause() function for <audio> elements, so I figured the same was available for the <video> HTML element. I went on the YouTube page, inspected the element of the video, and narrowed it down to this element:
<video
style="width: 853px; height: 480px; left: 280.833px; top: 0px;"
tabindex="-1"
class="video-stream html5-main-video"
controlslist="nodownload"
src="blob:https://www.youtube.com/cbd57a70-6691-bc44-bb4d-3e53926e5df1">
</video>
Hmm, interesting attributes there, especially controlslist="nodownload"! But I digress. Bummer that there's no id, but class is good enough. With a bit of JavaScript, I grabbed the video element:
document.getElementsByClassName('video-stream html5-main-video')
// returns an array of the elements with that class. In this case, there was only one.
Great, now we're getting somewhere. From here, I tried playing and pausing the video via JS:
const video = document.getElementsByClassName('video-stream html5-main-video')[0]
//=> returns the HTML video tag from above
video.play
//=> function play()
// The function exists!
video.play()
// The video started playing!
video.pause()
// The video paused!
Awesome. This was a good start. Now, if only I could figure out how long the video was, and then maybe have a setTimeout function that would play it automatically for me, and I might need an if statement that checked whether it matched the finish time...
Wait. Wait wait wait. There's had to be an easier way. I'm a programmer! There MUST be an easier way. So, I did some searching and looked for html video element. My second result was what I needed: Mozilla's developer documentation. From there, my instincts told me I needed to read absolutely nothing and use the browser find and cmd + f what I needed: repeat.
Zero results, "Phrase not found". Ugh. Thanks, Browser. I had SCROLL down and actually read. So much for an efficient solution. Well, I scrolled to what I needed, and under the "Attributes" section, there it was:
loop: A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.
Wow, a boolean! Even easier than I had expected. I go back to my YouTube page, and in the console, I check and set the video's loop attribute:
video.loop
//=> false
video.loop = true
//=> true
video.play()
// might as well not click while we're here, right?
Of course, I had to see if it would actually loop. I clicked to near the end of the video, and waited on the edge of my seat (literally, but mostly because I get into weird sitting habits) to see if it would repeat loop properly. If you're wondering why I didn't click straight to the end, it's probably because of some irrational reason. Anyway, time was ticking. 3 seconds left... 2 seconds left... 1 second left... 0. The video looped!!!
And just like that folks, I found a solution to loop videos on YouTube! I'm happy with how straightforward it was, and glad that I don't have to use an ad-filled website. That said, I might make a browser extension that does this with a click of a button, since I often have one hand on my mouse and the other on some food. Probably not though. Either way, I learned a neat little trick, with just a bit of Googling and intuition. Thanks for reading!
Top comments (23)
No need for an extension, you can add a bookmark with something like
And click it when you want the video to loop!
Even better than bookmarklet - use a userscript to add a Loop button to the page when it loads.
For instance, check out this userscript: greasyfork.org/en/scripts/16323-yo...
For more details about userscripts:
en.wikipedia.org/wiki/Userscript
stackoverflow.com/questions/525898...
tampermonkey.net/
Awesome! This is great!!
But if you right click on the youtube video, there is an option to loop the video currently playing. It works without installing any extensions. Have you checked that?
See, this is why I write these posts.
:mindblown:When I discovered it I was also stunned at how stupid and non-ergonomic this feature is
I was going to comment this, and then I thought someone might already have, and here you are.
Eh, right click the video and click Loop. 🤣
Oh.... right....
Nothing like good ol' overengineering solutions right? 😓
Ha yeah you can just right click the video and you get a "Loop" option ;)
You know what woul dbe a great youtube project? THere used to be a full blown website for it but whoever made it took it down.
If you make a youtube playlist and start playing it. Next time you go to the playlist it starts from the beginning and it's frustrating as hell. It woulld be better to be able to resume your playlist wherever you left off.
I create this to practice guitar riffs. It needs a little work, but I have used it a lot to learn from. You could use it to learn anything repetitive as well. 813software.com/bitpractice/?v=x-x...
The style of your writing is so pleasant and easy to read/follow. Keep it up!
Thanks!! Glad you enjoyed it!
Yo programmer,
Check this out.
classynemesis.com/projects/ytembed/
Just click the properties you want and VOILA! It loops
generated code:
iframe src="youtube.com/embed/QH2-TGUlwu4?auto..." width="560" height="315" frameborder="0">
/iframe>"
Not as much fun as grinding through code though.
Nice hack!
Now I'm wondering what's the markdown to put a YouTube video into your blog post.
OFF TO THE INTERNET!
It's custom!
See our editor guide for more.
I'd SO love to see that elsewhere, too.
Hmm, I wonder if other Markdown editors allow using embed links/scripts.
right click on video + loop button tho?