Fixed webpage nav banner opaque but <video> underneath shows through

I created a webpage with a fixed position navigation banner and set it to opaque. Everything on the page beneath disappears under the banner when I scroll down the page as it should, except when I insert a movie using a tag. The movie is superimposed over the banner when I scroll. This goes away when I remove the tag and declare it as an “iframe”. I can’t find any documentation on how to prevent this behavior for . Any help is greatly appreciated.

Sharing the link to your project will actually make it much easier to help.

Try nav{z-index=1:}
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

1 Like

Thanks. I’ve reduced the code to illustrate with 2 movies side by side. No change, the iframe is under the banner but the is superimposed on it.
https://drive.google.com/file/d/1VMPhz74bVZQj7ZkUGRx2r42oVGo-BqUg/view?usp=sharing

Thanks for your help, z-index:1; worked.

1 Like