videogular crops video rather than resizing

问题

I have a video with original size 1920x1080. I am using the css from the basic set up tutorial, but tried setting the default height in css to 1080:

.videogular-container {
    width: 100%;
    height: 1080px;
    margin: auto;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .videogular-container {
        width: 1170px;
        height: 658.125px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .videogular-container {
        width: 940px;
        height: 528.75px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .videogular-container {
        width: 728px;
        height: 409.5px;
    }
}

That seems to be the overflow thing - it just hides the rest of the video instead of actually resizing it.

In the config I have this set up:

width: 1920,
 height: 1080,      
 responsive: true,

What am I doing wrong?

回答1:

This is related with answer Controls font/symbols missing - videogular

You need to set the correct url for Videogular theme.

回答2:

This helps me. Just put it on the CSS file where the video is.

video {
  width: 100% !important;
  height: auto !important;
}

With display as FLEX

来源：https://stackoverflow.com/questions/30146285/videogular-crops-video-rather-than-resizing