DEV Community

Andy Zhao (he/him)
Andy Zhao (he/him)

Posted on • Updated on

Today I Googled: How to Loop Videos on YouTube

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:

  style="width: 853px; height: 480px; left: 280.833px; top: 0px;"
  class="video-stream html5-main-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
//=> function play()
// The function exists!
// The video started playing!
// 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:

//=> false
video.loop = true
//=> true
// 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!

Top comments (23)

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!

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:

For more details about userscripts:

andy profile image
Andy Zhao (he/him)

Awesome! This is great!!

sadick profile image

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?

andy profile image
Andy Zhao (he/him)

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

isaacleimgruber profile image

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

akashdeepsingh profile image
Akashdeep Singh

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

stephanie profile image
Stephanie Handsteiner

Eh, right click the video and click Loop. 馃ぃ

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

Oh.... right....

Nothing like good ol' overengineering solutions right? 馃槗

rup1 profile image

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.

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.

jess profile image
Jess Lee

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

andy profile image
Andy Zhao (he/him)

Thanks!! Glad you enjoyed it!

andreaszwane profile image
Andreas Zwane • Edited

Yo programmer,
Check this out.
Just click the properties you want and VOILA! It loops
generated code:
iframe src="" width="560" height="315" frameborder="0">
Not as much fun as grinding through code though.

jsalvador profile image
Juanjo Salvador

Nice hack!

jacoby profile image
Dave Jacoby

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


andy profile image
Andy Zhao (he/him)

It's custom!

{% youtube video-id %}

See our editor guide for more.

jacoby profile image
Dave Jacoby

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

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

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

mogery profile image
Gerg艖 M贸ricz

right click on video + loop button tho?

rrei profile image
Rui Rei
david_j_eddy profile image
David J Eddy

Couldn't you right click and select loop?

Loop video

sebastiannielsen profile image

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