Move the controls in [Youtube.com] from the bottom of the page to the top of the page.

[Docfxit]

I would like to move the controls in [Youtube.com] from the bottom of the page to the top of the page.
A lot of people creating Youtube videos put text on the bottom of the page and the controls cover it up when I pause a video.
I created code to move the controls to the top but it doesn't work:
`/* Apply styles when the "yt-controls-top" class is present on the body */
http://body.yt -controls-top .ytp-chrome-bottom {
position: absolute !important;
top: 10px !important;
bottom: auto !important;
width: 100% !important;
z-index: 1000 !important;
}

http://body.yt -controls-top .ytp-gradient-bottom {
display: none !important;
}

http://body.yt -controls-top .ytp-chrome-controls {
align-items: flex-start !important;
}`
I selected URL and put in https://www.youtube.com/
I'm using Firefox ver: 132.0.1
Stylus is up-to-date
Can anyone figure out what is wrong with the code?

[tophf]

This is invalid syntax. Why is there an http URL and what is -controls-top?

Something like this may suffice:

@-moz-document url-prefix("https://www.youtube.com/watch") {
.ytp-chrome-bottom {
  bottom: auto;
}
}

[Docfxit]

It worked the first time I did it. After that it won't work. I think I did something wrong.
This is what I have now:
javascript:(function(){ document.body.classList.toggle('.ytp-chrome-bottom'); })();

[tophf]

I made a mistake. Revert your code (remove the dot) and use .yt-controls-top .ytp-chrome-bottom in the style.

[Docfxit]

It's not working. I probably made a mistake.
This is what I have for the bookmark:
javascript:(function(){ document.body.classList.toggle('.yt-controls-top .ytp-chrome-bottom'); })();

[tophf]

No, use your original code for the bookmark: javascript:(function(){ document.body.classList.toggle('yt-controls-top'); })();
And .yt-controls-top .ytp-chrome-bottom { in the style

[Docfxit]

Now that's magical. It works great now.
Can I buy you a drink?
You are super.....