How Do I Make This Youtube Video Clickable (css + Z-index)?

I want the Youtube video to be a background wallpaper, but I still want it to be interactive. i.e. the user can pause the video by clicking on it. Right now, I've set the iframe to

Solution 1:

Like you said you have to change the z-index of every child of body except the iframe.

body > * {
z-index : 2!important;
}

#youtube_bg {
z-index : 1;
}

Or you change the z-index of body and html to -1, the iframe to 0 and the content keeps at 1 or auto.

html, body {
z-index : -1;
}
#yotube_bg {
z-index : 0;
}

For later edits of the css the second solution would be better