使用媒体查询重新定位<video>元素

Question

我在stevedillon.net获得了此页面，该元素以1280x1024视口为中心，但在其他尺寸偏离中心。在1280x1024，CSS #video使用margin-left将元素推向中心：13％;

我想修复它，以便使用媒体查询以不同的视口大小为中心。我试过以下，但没有运气。有什么想法吗？感谢

@media (max-width: 1000px){
    #video{
        width: 1200px;
        margin-left: 33%;
    }
} 

Answer 1

我通过使用以下媒体查询解决了这个问题。添加视口范围有助于控制视频容器的大小，就像添加width上方的1680px属性一样。

@media screen and (max-width: 1670px) and (min-width: 1280px) and 
(orientation: landscape) #video {
    margin-left: 20%;
}

@media screen and (max-width: 1900px) and (min-width: 1680px) and 
(orientation: landscape) #video {
  margin-left: 13%;
  width: 1200px !important;
}