How to get a background behind a video (CSS)

[Michael Frank]

Hi,

I’m wondering how to get a coloured, semi-transparant background for videos. I saw it here: http://www.adele.tv/videos/
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);
border-radius:0.3em
}

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!

[Senff]

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 Codepen.io) 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[/caption]

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

[Senff]

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]

I think this is what you need?

https://gist.github.com/anonymous/3428db71302944b6bd0e

[Senff]

If I look at your Pen at http://codepen.io/MichaelFrank/pen/pvNJdG, 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: http://codepen.io/senff/pen/XJNbqJ

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!!

[Author]

Posts