CODEWITHSUNDEEP
jquerycsshtmlhtml5-video
kas
kas

Reputation: 73

Need video to work for 3 style sheets - at the moment video is overflowing out of smaller divs

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>

Upvotes: 0

Views: 89

Answers (1)

joehand
joehand

Reputation: 391

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.

Upvotes: 1

Related Questions