[Resolved] Video in GP Container with border radius

[Jan]

Hi David,

I added a video to a GP container and gave the container a 30px border radius. Now I’d like to move the video into a layer behind the container so that the border of the container covers the corners of the video.

To achieve that I added two class IDs used the following CSS:

/* WG - Video behind border of container  */ 

#video {
    z-index: -1;
}

#video-frame {
    z-index: 10;
}

Unfortunately the video does not move backwards.

What am I missing?

Thanks,
Jan

[Ying]

Hi Jan,

Why not remove the border/border-radius from the container, and add them to the video itself?

#video-frame video[poster] {
    border: 5px solid var(--contrast-3);    
    border-radius: 20px;
}

[Jan]

Hi Ying,

perfect. This works very well

Lessons learned: keep things simple 😉

Best,
Jan

[Ying]

Glad to help 🙂

[Author]

Posts