2

我使用 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}
}

但这对我没有帮助。

4

0 回答 0