Making the video background a different color

[01001001110]

Sometimes I post videos to my site that aren’t in the widescreen format, so there are white bars running along the tops or sides of the .x-frame video container.

However, I noticed that every page/post has a different name for the video .x-frame.

For instance, on one page it’s .e832-17.x-frame, on another it’s .e1091-46.x-frame, on another it’s … you get the point.

Currently, I have to adjust the CSS on every page in order to get the background color to be black. Is there a global setting that can accomplish what I have to do on each and every page?

[christopher]

Hi @mtrxyz,

The classes that you have mentioned are the auto-generated ones and might change if you edit your page. The correct way of adding the background color is to identify a common element such as the video element. But I am not sure about your case as I don’t know how you add the videos.

Would you please give us 2-3 URLs that you have the videos on which you want to change the background color so that we can check the page using Google Chrome Developer Toolbar to be able to identify the correct CSS code that you can use.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

[01001001110]

I add the video element from the option in Pro, not the classic video, but the newer module. Here are two pages, one in which I changed the CSS and one that I left as is.

https://www… – The CSS is changed here; usually two white bars would appear on the side, but I added this:

.e944-61.x-frame {
   background-color: #000;
}

https://www… – In this section example, I kept the CSS as it i; the default white background appears above and below the video. This is the DEFAULT CSS:

.e832-17.x-frame {
    background-color: #ffffff;
    }

The video you posted really wasn’t much help, because – as you mentioned – the classes are auto-generated on a page-by-page basis. I keep having to add the CSS whenever I add a new video element.

Is there a global class for the video element that I can add to the master CSS? One that will change the background color to black for all videos added through the video element?

Thanks again

[kimmikennedy]

For a “per page” css on the element try (this way if you move this element OR add other elements and that element number changes, this method will dynamically tap into the page’s css and keep the style for THAT element):

$el.x-frame {
background-color: #000 !important;
}

For “global style sheet” simply create a unique class, and apply it to your element in the field where you can enter in a class name

.your-unique-style-name {
background-color: #000 !Important;
}
.

[01001001110]

Hi @kimmikennedy

The global option you provided doesn’t work because the new version of Pro, and the new video element have the “class” field at the bottom – like the classic video element did. However, you do seem to understand my problem. Thanks for the attempt.

[ruenel]

Hello There,

To add a code in the theme options custom css, you can make use of this code:

.x-frame-inner video {
  background-color: white;
}

Hope this helps. Please let us know how it goes.

[01001001110]

Hi RueNel! – That totally worked, thanks for the help.

[ruenel]

You’re welcome!
We’re glad we were able to help you out.