The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to get a background behind a video (CSS)

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #191943
    Michael Frank


    I’m wondering how to get a coloured, semi-transparant background for videos. I saw it here:
    It didn’t look to complicated but I didn’t succeed..
    I have this in my custom CSS:

    .videobackground {
    padding:2px 6px 4px 6px;
    border: 1px solid rgba(255, 255, 255, .5);
    display: inline-block;
    position: left;
    background: rgba(24, 205, 221, 0.6);

    Now I can use it as a text background or even an image but a video won’t work..! Would be nice to add a title and date.

    Please help!


    The fact that there’s a video shouldn’t matter — that’s just content in a box that has a semi-transparent background.

    Do you have an example (or can you create a pen on where we can see how it doesn’t work for you if you use a video?

    Michael Frank

    Thnx for your reaction; I have an example with a picture. This works:

    [caption id="attachment_261"]Onderweg Onderweg[/caption]

    But when I replace the picture for a video, and I’ve tried it on several ways, it doesn’t work..


    I’m afraid we can’t diagnose any problems from a picture — we really need to see how the code ends up in the browser.

    Michael Frank

    If I look at your Pen at, I don’t see any problems right away; the light blue background is semi-transparent.

    Whether you have an image or a video, it should have no impact on the background behind the image or video. See:

    If you want to use a video as a background of a box (that’s not what’s happening on the example you gave on the Adele site), that’s a whole different story, but I assume that’s not what you’re asking (since the original post is talking about a background behind a video).

    Michael Frank

    Thanks for the solution! I see in codepen that this works perfectly. However, in my wordpresstheme, I still can’t see the video..
    As I think the CSS is correct, I will contact the themebuilder for a working solution for this theme.

    Thanks again!!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.