Docs

[Jeremy P]

On pages like this one I’m getting the bottom of the video covered up, it’s not showing. There should be controls at the bottom. I’ve spoken to my video hosting support and they say it’s the x-video CSS.

[Jeremy P]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-video .x-video-inner {
    padding-bottom: 76.25%;

}

Hope that helps.

[Jeremy P]

Hi, that doesn’t seem to be doing it. For reference, I’ve added the embed code just in html below the x-video embed code, and the controls are showing well there.

[Christopher]

Hi there,

The issue is coming from ifram tag’s style, please remove height and width attributes to fix this. See the attachment.

Hope it helps.

[Jeremy P]

Hi, interestingly, that code is not quite what I have in the x-video embed box. Here is the embed code wistia gives me

<div class=”wistia_responsive_padding” style=”padding:50.0% 0 0 0;position:relative;”><div class=”wistia_responsive_wrapper” style=”height:100%;left:0;position:absolute;top:0;width:100%;”><iframe src=”//fast.wistia.net/embed/iframe/2ey2rcgqto?videoFoam=true” allowtransparency=”true” frameborder=”0″ scrolling=”no” class=”wistia_embed” name=”wistia_embed” allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=”100%” height=”100%”></iframe></div></div>
<script src=”//fast.wistia.net/assets/external/E-v1.js” async></script>

So, the CSS you referenced above seems to be in the div called video foam dummy. So, as an experiment, I have now changed the embed code given to me by Wistia (in the src=”” section) from

videoFoam=True

to

videoFoam=False

This seems to have worked, as now the entire video shows. The only problem remaining is that the padding below the video is larger than the rest of the padding. How should I fix that?

To confirm, this is the embed code I now have in the X-video embed box:

<div class=”wistia_responsive_padding” style=”padding:50.0% 0 0 0;position:relative;”><div class=”wistia_responsive_wrapper” style=”height:100%;left:0;position:absolute;top:0;width:100%;”><iframe src=”//fast.wistia.net/embed/iframe/2ey2rcgqto?videoFoam=false” allowtransparency=”true” frameborder=”0″ scrolling=”no” class=”wistia_embed” name=”wistia_embed” allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=”100%” height=”100%”></iframe></div></div>
<script src=”//fast.wistia.net/assets/external/E-v1.js” async></script>

[Jeremy P]

For reference, now that videofoam is set to false, I’ve tried the CSS you initially suggested, and I’ve tried removing it. The problem persists.

[Lely]

Hi Jeremy,

Please try this one:

.page-id-6250 #x-section-1 .x-video .x-video-inner {
    padding-bottom: 50.25%;
}

Hope this helps.

[Jeremy P]

No, that didn’t do it either. I also think that CSS would be a little too specific, as I have many many pages with similar videos that do the same thing.

[Rad]

Hi there,

In that case, you can do multiple classes that you can optionally add to selected video. Example,

.x-video.size-1 .x-video-inner {
    padding-bottom: 50.25% !important;
}
.x-video.size-2 .x-video-inner {
    padding-bottom: 40.25% !important;
}

You may create as many as you want with different sizes. Then simply add size-1 or size-2 to your video embed’s Class input.

cheers!

[Jeremy P]

Thanks, that sounds good, but that code is still not affecting the padding around the video.

[Rue Nel]

Hello There,

The code did not work because you were inserting an embed code from Wistia. To resolve it, you may use this code:

.x-video .wistia_responsive_padding {
    padding-top: 20% !important;
}

And by the way, you have an invalid css. You should have something like this:

/* remove padding on some videos */
.x-video.size-1 .x-video-inner {
    padding-bottom: 50.25%;
}
/* end remove padding */

Hope this helps.

[Jeremy P]

Thank you. In the end I find that I need both sections of CSS and that fixes it.

*/ remove padding on some videos */
.x-video .wistia_responsive_padding {
padding-top: 20% !important;
}
.x-video .x-video-inner {
padding-bottom: 50.25%;
*/ end remove padding */

[Lely]

You’re welcome!

Cheers!

[Author]

Posts