jquery - 需要视频为 3 个样式表工作 - 目前视频从较小的 div 中溢出

Question

您好，我有一个专为宽屏设计的页面，因此我创建了 css 样式表来调整 img 等的大小以适应 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>

Answer 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 中需要一些宽度或高度。您可以使用媒体查询设置它以根据浏览器大小调整大小。