Full Width Video

[ronin]

Hi,

We’re after a full width video on the home page, but it seems to be stretching. Ideally we’d like the video to be width: 100% all the time, with a height that adjusts, whereas the default seems to stretch the video wider than 100%. I looked through previous questions and found a suggestion to add padding: 10%, which I’ve done – this makes the video the right width, but now the video is being pushed down the page, with the cover image showing up behind it. It’s also covering the text block underneath it.

Any advice would be appreciated, thanks.

[David Martin – Support]

Hi,

Are you using a Row to contain the video, have you tested using the Swift Slider?

Please add a WP login for us to take a closer look.

Thanks.

[ronin]

Hi,

I’ve tried the swift slider and that worked perfectly, thank you.

Just so you know, I was using a full width row with a video background, and that was what was causing the issue.

Thanks

[David Martin – Support]

Great, thanks for reporting this back also.

– David.

[ronin]

Hi guys,

Sorry but I’m still having trouble with this. The swift slider works a lot better, but it still stretches the video. I’ve added some code in that makes the video always 100% width, but the slider is pulling a height from somewhere, so on smaller sized screens there’s a big gap underneath the video (pictured).

It was important for the video to not be stretched as there’s text pretty close to the left side, so we’d like to keep that always visible. The width is working now, but if you could help us get the height to work, that would be great. Thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Is the video set to window height?

Please add a WP login for us to take a closer look.

Thanks.

[ronin]

This reply has been marked as private.

[David Martin – Support]

Hi,

What screen size or device orientation do you see this on?

I do see a large gap, however below the video the element has this CSS with is causing a large top/bottom margin:

.spb_text_column {
    padding: 13em 0;
}

The gap directly below the video is caused by your CSS:

video.video, 
.swiper-slide.video-slide {
    width: 100%!important;
    margin: 0!important;
    height: auto!important;
}

If you have to keep that CSS, then you could test using this for desktop:

.spb_swift-slider.spb_content_element.col-sm-12 {
    margin-bottom: -13rem;
}

[ronin]

Hi David,

Thanks for the reply.

I had to put the following code in to keep the video full width at all times, otherwise the text gets cut off:

video.video,
.swiper-slide.video-slide {
width: 100%!important;
margin: 0!important;
height: auto!important;
}

The gap is coming from the video’s predefined height of 923px, which I can’t set to auto without the entire video collapsing. The padding on the text column only accounts for a small amount of the gap (and is actually the desired gap).

I tried your code (it is active in the pictures), but because the gap isn’t caused by the padding of 13em but by the video needing to be 923px, the gap just keeps increasing as you downsize the window.

I could set different heights for the video at various break points, but I was wondering if there was something better I could do.

Thanks again.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Can you test adding this:

video.video, 
.swiper-slide.video-slide {
    height: 100vh!important;
}
.swiper-slide.video-slide {
    height: 100vh!important;
    background-size: cover;
}

Thanks.

[ronin]

Thanks David, but that just forces the placeholder image to be 100vh while the video stays the same proportion.

[David Martin – Support]

Hi,

This is what I see for iPhone, iPad Mini and iPad:

What screen size/device/orientation are you viewing this with? Might be better to remove your custom CSS during this time.

Thanks,
David

[ronin]

Hi David,

iPad etc are fine, it’s more the various sizes of laptops and being able to resize your window and have the video remain the right proportions.

[David Martin – Support]

Hi,

Have you tested using the Rev Slider plugin, this allows for greater control of screen sizes and breakpoints for content.

I am not sure I can suggest any more CSS to assist with this as this will only distort the video further.

Thanks,
David.