Home/ Questions/Q 7774319
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T17:20:52+00:00

Hi I have a page that is designed for wide screens so I created

  • 0

Hi I have a page that is designed for wide screens so I created css style sheets to resize the imgs etc down to work for the 2 smaller sizes, but the video component just stays the same. Any suggestions on how I would tackle this issue.

the url can be found here http://tinyurl.com/6q4pz92

I am trying to use html 5 video and this is my code

            <!-- 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are declaring the width and height in the html element: 

     <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="{}">

    Regardless of what you put in the CSS the video will stay 900 x 600.

    Instead: Change that to width=100% and remove the height component. Then you can put a wrapper on the video and size that in the CSS.

    See this helpful tutorial for the full explanation:

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

    EDIT:
    Your site has this code: 

    <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>

    the <div class="videowrapper"> needs some width or height in the css. You can set this with media queries to resize based on the browser size.

    • 0