Benötigen Sie Video für 3 Stylesheets zu arbeiten - im Moment Video ist überfüllt von kleineren divs

Question

Hallo Ich habe eine Seite, die für breite Bildschirme entworfen wurde, so habe ich CSS-Stylesheets zur Größe der Imgs usw. für die 2 arbeiten kleinere Größen, aber die Videokomponente bleibt einfach gleich. Irgendwelche Vorschläge, wie ich dieses Problem angehen würde.

kann die URL hier http://tinyurl.com/6q4pz92

fand Ich versuche HTML 5 Video und das ist mein 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> 

Answer 1

erklären Sie die Breite und Höhe in dem HTML-Elemente zu verwenden:

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

Unabhängig davon, was Sie in der CSS setzen das Video bleiben 900 x 600

Stattdessen: Ändern Sie das auf Breite = 100% und entfernen Sie die Höhenkomponente. Dann können Sie einen Wrapper auf das Video und die Größe in das CSS einfügen.

Sehen Sie diese hilfreiches Tutorial für die vollständige Erklärung:

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

EDIT: Ihre Website hat diesen 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> 

die <div class="videowrapper"> eine Breite oder Höhe in der CSS braucht . Sie können dies mit Medienabfragen festlegen, um die Größe basierend auf der Browsergröße zu ändern.