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:

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

Top comments (23)

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
 
andy profile image
Andy Zhao (he/him)

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)

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) • 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

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

Collapse
 
andy profile image
Andy Zhao (he/him)

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)

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)

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

Collapse
 
mogery profile image
Gerg艖 M贸ricz

right click on video + loop button tho?

Collapse
 
rrei profile image
Rui Rei
Collapse
 
david_j_eddy profile image
David J Eddy

Couldn't you right click and select loop?

Loop video

Collapse
 
sebastiannielsen profile image
Sebastian-Nielsen

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