CODEWITHSUNDEEP
jquerycss
krizajb
krizajb

Reputation: 1814

jquery resize() and css @media

I wish to have resizeable video after 805px width on specific element. Before that I control size of video via css @media. Everything works when resizing from max to min, but via versa the height and width of video aren't taken from css any more. Am I expecting to much?

I have the following code:

$(window).resize(function() {
    var newWidth = $fluidEl.width();
    var windowWidth = $(window).width();

    if(windowWidth < 805) {
        // Resize all videos according to aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * 0.7129629629629629);
        });
    }
})

and css:

@media (max-width: 1199px) {
.video {
    height: 236px;
    width: 356px;
}
}

@media (max-width: 992px) { 
.video {
    height: 483px;
    width: 730px;
}
}

Upvotes: 0

Views: 135

Answers (1)

T.S.
T.S.

Reputation: 1242

Once you set the dimensions, they will be in the style attribute of the video elements. The CSS in the style attribute has higher priority than the CSS in your media queries.

To solve this, make sure that you remove the dimensions with JavaScript as soon as you want to fall back on the media queries:

$(window).resize(function() {
    var newWidth = $fluidEl.width();
    var windowWidth = $(window).width();

    if(windowWidth < 805) {
        // Resize all videos according to aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * 0.7129629629629629);
        });
    } else {
        $allVideos.css({width:"",height:""});
    }
})

Upvotes: 1

Related Questions