Archived topic

Video in GP Container with border radius

3 replies · Started by Jan on September 26, 2022

Viewing posts 1–4 of 4

September 26, 2022 at 2:12 pm #2354568

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

September 26, 2022 at 2:27 pm #2354579

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;
}

September 27, 2022 at 8:56 am #2355549

Hi Ying,

perfect. This works very well

Lessons learned: keep things simple ;-)

Best,
Jan

September 28, 2022 at 4:33 pm #2356976

Glad to help :)

This archived topic is closed to new replies.

Start building better websites today.