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
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
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') //=> 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
cmd + f what I needed:
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
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!