jquery resize() и css @media

Question

Я хочу иметь изменяемое по размеру видео после ширины 805 пикселей по определенному элементу. До этого я контролирую размер видео с помощью css @media. Все работает при изменении размера от max до min, но, наоборот, высота и ширина видео не берутся из 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. CSS в атрибуте style имеет более высокий приоритет, чем CSS в ваших медиа-запросах.

Чтобы решить эту проблему, убедитесь, что вы удалите размеры с JavaScript, как только вы хотите, чтобы упасть обратно на вопросы СМИ:

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