Displaying full-width video without cropping or adding extra space on the sides?

I figured it out and thought I'd document it in case anyone ran into this issue. I had to go into the block css and add the following declaration:

display: contents;

So my CSS for the video element and the block containing it looks like this:

    .hero-vid {
    width: 100%
    }

.video-container {
    display: contents;
    }

I've never used this value for the display property before. The display: contents declaration "makes the container disappear, making the child elements children of the element the next level up in the DOM".

Maybe this should be added as a third option for video elements. Once you know how to do it, it seems really simple.

The Nicepage editor doesn't display it properly as it's trying to display the video element 100% across the editor page, but at least it works on the front end.

Last edited 24 November 2022 by shane53

Hi Shane,

We recommend to resize the block with the video in each responsive mode separately, also you can set a video as the block background.
Also it is good to hear that you have found a solution.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

I noticed DIVI does the same thing - forces a static block height.

After updating Nicepage my solution stopped working so I've been resizing responsively. Fortunately my picky client seems fine with it.

Hi,

I have a similar problem with YT video. I read a similar content there on the forum. But this is 6 years old! Really you still don't have a solution NICEPAGE?

I want responsible website, where will be 4 videos. For example.

First video has own block, align left and video has width: 60 % of page. But I want to have Height as auto. Because when I set height manually, so video does not responsible! I see black frame on the left and right or top and down.
Second video has own block, after first video, align right, and width: 60% of pages.
etc...

How to make height as auto? Responsible.

When I upload video to hosting and I use Nicepage videoplayer, will be work it?

Last edited 22 January 2024 by jirinovy6