How do I give all videos the highest z-index priority?

[btbogan]

Hey guys,

I am having an issue with my videos z-index where they are showing up behind things. It would take me FOREVER to go into all of my pages to z-index all the rows they’re on to 9. Is there a way I can target ALL videos on my site with one code to have z-index 9, like through CSS or something?

Lifestyle Courses & LCA On Demand

thanks so much.

[rad]

Hi @btbogan,

Thanks for reaching out.

May I know which page has these videos? I like to see what selector it has or it uses a specific player or embed code.

Thanks!

[btbogan]

sure,

for instance this page --> http://www.lifestyleuni.com/christlike-course-shop-page/

I have a plugin that makes my videos sticky when you scroll down, but as you scroll down, the videos show up behind text and rows & sections and such.

If i change the z-index of the section the video is embedded in, it fixes the problem. But we are talking about hundreds of pages here, and ongoing.

So is there a way I can simply target the z-index of all videos through CSS?

some are embedded from youtube. some are embedded from vimeo. some are using the “video” element. some are using the “classic video” element, since they were created a long time ago.

thanks guys

[ruenel]

Hello @btbogan,

Do you want something like this?

Please edit your page back in Cornerstone and find the section containing the video. You must set the z-index of the section to at least 999.

We would loved to know if this has work for you. Thank you.

[btbogan]

right, but I mentioned that in my original question.

“It would take me FOREVER to go into all of my pages to z-index all the rows they’re on to 9. Is there a way I can target ALL videos on my site with one code to have z-index 9, like through CSS or something?”

and again in my reply here

“If i change the z-index of the section the video is embedded in, it fixes the problem. But we are talking about hundreds of pages here, and ongoing.”

So is there a way I can simply target the z-index of all videos on my website through CSS?

[ruenel]

Hello @btbogan,

As long as all those sections has an ID like the one in the page mentioned above, you can make use of this css code:

div#video {
    z-index: 9999;
}

Please add that following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r).

[btbogan]

they do not all have that ID, most of the sections have no ID. Is there a way to target all videos instead of all of the section ID’s?

Or even the sticky video plug-in’s placeholder?

I’m really not sure what is causing it to go behind like that. But could you guys help me figure out why or how to fix it? How could I target them like this?

either targeting all videos or targeting the plugin itself?

does that make sense?

thanks

[ruenel]

Hello @btbogan,

Is there a way to target all videos instead of all of the section ID’s?

• No. The problem is not the video. What you need is to increase the z-index of the section which is the container of the video.

Your iframe is already in fixed position and has z-index: 9999999 !important;. Even then, it is still behind the sections because these sections has z-indexes too. And as you’ve mentioned that not all of these sections has an ID or a unique class that indicates that it is a container of the video. The way I see it, you only have one option and that is to edit all of your 9 pages and make sure that the z-indexes of the section is way higher than the other so that your video will be on top of other sections.

Hope this explains it briefly.

[btbogan]

got it, that makes sense. thanks for the explanation. I guess I’ll have to get busy editing all those pages haha.

thanks guys.

[rad]

You’re most welcome!