0

嗨，我有一个专为宽屏设计的页面，所以我创建了 css 样式表来调整 imgs 等的大小以适用于 2 个较小的尺寸，但视频组件保持不变。关于我将如何解决这个问题的任何建议。

网址可以在这里找到http://tinyurl.com/6q4pz92

我正在尝试使用 html 5 视频，这是我的代码

            <!-- styles for html 5 video -->
            <link href="video-js/video-js.css" rel="stylesheet">
           <video id="sms1_video"class="video-js vjs-default-skin" controls
         preload="auto" width="900" height="600" poster="images/sms/AnimationScreen_SMSXMAS.jpg"
        data-setup="{}">
           <source src="images/interactive/SMS_2011ChristmasAnimation.mp4" type="video/mp4" /><!-- MPEG4 for Safari -->
            <source src="images/interactive/SMS_2011ChristmasAnimation.webm" type="video/webm" /> 
             </video>
4

1 回答 1

1

您在 html 元素中声明宽度和高度：

 <video id="sms1_video"class="video-js vjs-default-skin" controls
     preload="auto" width="900" height="600" poster="images/sms/AnimationScreen_SMSXMAS.jpg"
    data-setup="{}">

无论您在 CSS 中添加什么内容，视频都将保持 900 x 600。

相反：将其更改为 width=100% 并删除高度组件。然后，您可以在 CSS 中对视频和大小进行包装。

有关完整说明，请参阅此有用的教程：

http://www.netmagazine.com/tutorials/create-fluid-width-videos

编辑： 您的网站有以下代码：

<div class="videowrapper"><video id="sms1_video" class="video-js vjs-default-skin" controls="" preload="auto" width="100%" poster="images/sms/AnimationScreen_SMSXMAS.jpg" data-setup="{}">
       <source src="images/interactive/SMS_2011ChristmasAnimation.mp4" type="video/mp4"><!-- MPEG4 for Safari -->
       <source src="images/interactive/SMS_2011ChristmasAnimation.ogv" type="video/ogg"> <!-- Ogg Theora for Firefox 3.1b2 -->
        <source src="images/interactive/SMS_2011ChristmasAnimation.webm" type="video/webm"> 
         </video>
</div>

在<div class="videowrapper">css中需要一些宽度或高度。您可以使用媒体查询将其设置为根据浏览器大小调整大小。

于 2012-04-10T18:55:33.447 回答