CSS only modal showing up behind nav and youtube iframe.

[usmaanmujtaba]

I have used the free CSS code to create a meet the team page for our website. But whenever the modal opens and you scroll through the page, the youtube videos and the nav show in front of the modal. I am looking to either figure out how to fix the problem or to just stop the scrolling of the body. I have not used any JS at the moment and would like to keep it like that as I am not very familiar with it but if need be, I don't mind implementing it on the page.

Here is the webpage, I have temporarily made it visible:
http:https://www.amyflowers.ca/about-us/duplicate-of-meet-the-team/

Thank you in advance for your help. I have been a longtime user of github and have learned a lot from it. This is the first time I needed to post something as I wasn't able to find it. I'm sure this problem has come up before, not sure why I couldn't find it.

Look forward to hearing from the community.

[drublic]

Please use a z-index lower than the modal's one (which is 999) for the navigation. YouTube videos sometimes need an extra parameter or something like this. If you google for this problem: http:https://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe

Please include the JS on your page without looking at it any further. It should just work.