Youtube Mobile Looper

Add a simple loop/unloop button to the navbar for Youtube Mobile. Made in about 15 minutes as a teaching tutorial.
As of 23/07/2021. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Youtube Mobile Looper
// @namespace    http://tampermonkey.net/
// @version      4.20.69
// @description  Add a simple loop/unloop button to the navbar for Youtube Mobile. Made in about 15 minutes as a teaching tutorial.
// @author       Taylor Wright
// @match        https://m.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @grant        none
// ==/UserScript==

//I DIDN'T HAVE TIME TO FINISH THIS! I need to make it work from entering from m.youtube.com instead of just watch. Single Page Apps were terrible for the userscript environment.

//append some CSS to the header with the += hack. You can write it like CSS and HTML between ``
document.querySelector('head').innerHTML += `<style>
.loopBtns{
    position: fixed;
    z-index: 999;
    top: 20px;
    left: 130px;
	font-weight: 900;
    color: silver;
}
</style>`

//declare some variables and create some elements
let loopBtn = document.createElement("BUTTON");
let unLoopBtn = document.createElement("BUTTON");
//got rid of the line below and just used the querySelector where ever video was for a fresh grab each time. Allows me to come in through the front page.
//let video = document.querySelector('.html5-main-video');
let appendTo = document.querySelector('body');
let url = location.href;

loopBtn.innerHTML = "Loop";
unLoopBtn.innerHTML = "Unloop";
loopBtn.className = "loopBtns";
unLoopBtn.className = "loopBtns";


//make unloop class hidden, we'll unhide it and hide loop after loop is pressed and visa versa
unLoopBtn.style.display = "none";

appendTo.appendChild(loopBtn);
appendTo.appendChild(unLoopBtn);

//add some event listeners to make the video loop, hide the loop button/unloop button
loopBtn.addEventListener("click", () => {
	document.querySelector('.html5-main-video').loop = true;
	unLoopBtn.style.display = "block";
	loopBtn.style.display = "none";
});

unLoopBtn.addEventListener("click", () => {
	document.querySelector('.html5-main-video').loop = false;
	unLoopBtn.style.display = "none";
	loopBtn.style.display = "block"
});

//last, listen for the URL/window to change and change loop button to it's off state
//I used a primitive method I copy pasted for this part due to problems with mobile.


document.body.addEventListener('click', ()=>{
    requestAnimationFrame(()=>{
      if(url!==location.href){
          document.querySelector('.html5-main-video').loop = false;
          unLoopBtn.style.display = "none";
          loopBtn.style.display = "block"
          url = location.href
      }
    });
}, true);