DEV Community

loading...

Today I Googled: How to Loop Videos on YouTube

Andy Zhao (he/him)
uh oh where'd my bio go!
Updated on ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (24)

Collapse
antogarand profile image
Antony Garand • Edited

No need for an extension, you can add a bookmark with something like

javascript:document.getElementsByClassName('video-stream html5-main-video')[0].loop=true

And click it when you want the video to loop!

Collapse
splintor profile image
Shmulik Flint

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/

Collapse
citizen428 profile image
Michael Kohl • Edited

Nice! I still think many browser extensions are unnecessary and easy to replace by bookmarklets.

Collapse
andy profile image
Andy Zhao (he/him) Author

Awesome! This is great!!

Collapse
sadick profile image
Sadick

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?

Collapse
andy profile image
Andy Zhao (he/him) Author

See, this is why I write these posts. :mindblown:

Collapse
isaacleimgruber profile image
IsaacLeimgruber

When I discovered it I was also stunned at how stupid and non-ergonomic this feature is

Collapse
akashdeepsingh profile image
Akashdeep Singh

I was going to comment this, and then I thought someone might already have, and here you are.

Collapse
stephanie profile image
Stephanie Handsteiner

Eh, right click the video and click Loop. 🤣

Collapse
andy profile image
Andy Zhao (he/him) Author • Edited

Oh.... right....

Nothing like good ol' overengineering solutions right? 😓

Collapse
rup1 profile image
Rup

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.

Collapse
ryanoc profile image
Ryan Connolly

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

Collapse
jess profile image
Jess Lee (she/her)

The style of your writing is so pleasant and easy to read/follow. Keep it up!

Collapse
andy profile image
Andy Zhao (he/him) Author

Thanks!! Glad you enjoyed it!

Collapse
andreaszwane profile image
Andreas Zwane • Edited

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.

Collapse
jsalvador profile image
Juanjo Salvador

Nice hack!

Collapse
jacoby profile image
Dave Jacoby

Now I'm wondering what's the markdown to put a YouTube video into your blog post.

OFF TO THE INTERNET!

Collapse
andy profile image
Andy Zhao (he/him) Author

It's custom!

{% youtube video-id %}

See our editor guide for more.

Collapse
jacoby profile image
Dave Jacoby

I'd SO love to see that elsewhere, too.

Thread Thread
andy profile image
Andy Zhao (he/him) Author

Hmm, I wonder if other Markdown editors allow using embed links/scripts.

Collapse
rrei profile image
Rui Rei
Collapse
sebastiannielsen profile image
Sebastian-Nielsen

You can just right click on the video and click "loop". lol

Collapse
david_j_eddy profile image
David J Eddy

Couldn't you right click and select loop?

Loop video

Collapse
mogery profile image
Gergő Móricz

right click on video + loop button tho?