Search code examples
javascriptcssangularjsvideogular

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?


Solution

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

    You need to set the correct url for Videogular theme.