Me and javaScript haven't really been best friends. that's a fact most of you probably will now about. Still, I try to get a little closer to it, and try writing some simpler scripts. Today at work I had to create a turn off the lights button and realized that all over the internet I could not find one script that did what I wanted. So I had to mix about six different ones until I got the result I was looking for. And since I did not have wishes like noone else but had the same questions usually asked in the comment section of each of the tutorials I decided to share my script with you.

Okay, the basic markup looks like this.
We have a video which we embed in an iframe, which we put in a container.
At the end of our whole markup we add another empty container to which we add the ID shadow. This is the turned off light. Also we do include jQuery, that's what we will be using.
And of course we need a toggle. You can use a button I used literally a link that does not point anywhere (no href), since I had written the CSS already and it had to look like the other links right next to it.
Add jQuery by downloading and hosting or just point to the Google Link.

Next for the CSS. Most important is the z-index. We wanna cover all of the content with the shadow except for the link and the video. I made my video responsive (that's why the container, and also because it is easier to add a class to that in wordpress than it is to the embeded iframe), the link got a button look.

Note that I do not put a height to the shadow because we want to have it cover all of our content not just what is seen in our window. We'll add the height in our script. Also I start with a shadow that is hidden.

Basically it is extremely simple. jQuery has a function to do exactly what I want. That's how the script looks and it does what it has to. It adds the height to our shadow and fades it in and out when clicking on our button.

As I said, it works but the script is not yet as I want it. What bothered me most was that even if the light was turned off, the link still said to turn the lights off instead of on. I wanted to change that and then I did have the navbar. This had to have a higher z-index than the video because the dropdown should be above the video, but when the lights were turned off, I wanted the navbar to be hidden too. What I did was add a class to the swith when the shadow was visible and then I just adjusted the css of the navbar and the text of the link as soon as there was the class.
And then we are done and can go on.
My markup changed because I did only want to change the text of the link, but also had an icon added. So what I did was add a span around the text and only change this when toggling.

There is also a night version.
The question I often stumbled upon was if you could start with the lights turned off and so I thought I could add that in my tutorial as well.
We adjust it a little bit and the night version is done.