jquery resize() and css @media

Question

특정 요소에 805px 너비 뒤에 크기 조정이 가능한 비디오를 만들고 싶습니다. 그 전에는 CSS @media를 통해 비디오의 크기를 제어합니다. 모든 것이 최대에서 최소로 크기 조정될 때 작동하지만, 비디오의 높이와 너비는 더 이상 css에서 가져 오지 않습니다. 나는 많이 기대하고 있나?

$(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); 
     }); 
    } 
}) 

과 CSS : 당신이 크기를 설정하면

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

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

Answer 1

, 그들은 비디오 요소의 style 속성에있을 것입니다

나는 다음과 같은 코드가 있습니다. style 속성의 CSS가 미디어 쿼리의 CSS보다 우선 순위가 높습니다. 이 문제를 해결하기 위해

, 당신은 미디어 쿼리에 후퇴 할하자마자 자바 스크립트와 치수를 제거해야합니다

$(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:""}); 
    } 
})