Today I Googled: How to Loop Videos on YouTube
Tags: todayisearched, javascript, html
Published: 2018-09-05 22:07:30

---
title: Today I Googled: How to Loop Videos on YouTube
published: true
description: "Hint: the answer is not an ad-filled link that does something you can do."
tags: todayisearched, javascript, html
---

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](https://en.wikipedia.org/wiki/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:
{% youtube F1B9Fk_SgI0 %}

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:
```html
<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:
```javascript
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:
```javascript
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:
```javascript
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!