用于video.js（移动）v的视频播放器的流体设计

Question

我使用video.js在移动设备上创建了一个视频观看页面。 代码段：

<video id="intro_video" class="video-js vjs-default-skin"  controls poster='img' preload="auto" data-setup="{}">
 <source src="v.webm" type="video/webm" /> 
 <source src="v..ogg" type="video/ogg" /> 
 <source src="v.mp4" type="video/mp4" />  
       </video>

我面临的问题是它需要默认的宽度和高度。如果我在CSS中指定高度和宽度，它仍然会覆盖。

我希望有一个解决方案，使用流体设计来获取宽度和高度。

我使用了这个css解决方案：

@media only screen and (min-width: 992px) and (max-width: 1280px) {
#intro_video,#video_wrap {height:640px;
                 width:992px}

#intro_video_html5_api{height:640px;
                 width:992px}
}

/* VERTICAL TABLET LAYOUT: 768px - 991px
----------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#intro_video,#video_wrap {height:480px;
                 width:640px}
#intro_video_html5_api{height:480px;
                 width:640px}
}




/* WIDE MOBILE LAYOUT: 480px - 767px
----------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #intro_video {height:320px;
                 width:480px}
 #intro_video_html5_api   {height:320px;
                 width:480px}
}

但它没有帮助我。