Wie man 2 videos nebeneinander, zentriert und reaktionsschnell

Ich versuche, fügen Sie 2 videos nebeneinander, die sind zentriert und beabstandet richtig, und dann wollen Sie reagieren mit dem zweiten video, das unten unter dem ersten video, so dass es angezeigt werden können gestapelt oder auf mobilen Geräten. Mein Html, das ich arbeite mit:

<div id="wrapper"> 
  <div id="home1">
   <video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
     <source type="video/mp4" src="images/stories/home1.mp4" /> 
   </video>
  </div>
  <div id="home2">
   <video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
     <source type="video/mp4" src="images/stories/home2.mp4" /> 
   </video>
  </div> 
</div>

und mein css so weit ist:

#wrapper { 
    width: 920px; 
    height: 350px; 
    margin: 0 auto; 
} 

#home1 { 
    width: 400px; 
    height: 300px; 
    float: left; 
} 

#home2 { 
    width: 400px; 
    height: 300px; 
    float: right; 
}

@media (max-width:767px) {
    .home1 {
        position: relative;
        padding-bottom: 56.25%; /* 16/9 ratio */
        padding-top: 30px; /* IE6 workaround*/
        height: 0;
        overflow: hidden;
    }
    .home2 {
        margin-left: 0;
    }
}

Danken Ihnen im Voraus

  • Haben Sie versucht, etwas hinzuzufügen, um Ihre Medien-Abfrage, entfernen Sie den Schwimmer und maximieren die Breite - wie wrapper-div { width: 100%; float: none; } edit: würden Sie wirklich brauchen, um genauer zu sein, da Sie mit #'s auf die divs so #home1, #home2 { width: 100%; float: none; }
  • codepen.io/evanrbriggs/pen/pwkHj
  • Das funktioniert gut, @Evan
InformationsquelleAutor Sean Thomas | 2014-08-06
  1. 0

    Habe ich einige änderungen in deiner html-und css-testen Sie selbst.

    HTML

    <div id="wrapper"> 
    <video id="home1" width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
        <source type="video/mp4" src="images/stories/home1.mp4" /> 
    </video>
    <video id="home2" width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
        <source type="video/mp4" src="images/stories/home2.mp4" /> 
    </video>
    <div class="clear"></div> 
</div>

    CSS

    #wrapper { 
    width: 920px; 
    height: auto; 
    margin: 0 auto;
} 
#home1 { 
    width: 47.5%; 
    height: 300px; 
    float: left; 
    margin-right: 5%;
} 

#home2 { 
    width: 47.5%; 
    height: 300px; 
    float: left; 
}

.clear{
    clear: both;
}

@media (max-width:767px) {
    #wrapper{
        width: 100%;
        height: auto;
    }
    #home1 {
        width: 100%;
        height: auto;
        float: none;
    }
    #home2 {
        width: 100%;
        height: auto;
        float: none;
    }
}
    • Jefferson danke für die info-viel geschätzt! Ich habe es getestet und es erscheint korrekt auf die mobile website mit den videos, die unter jedem anderen, aber nicht auf desktop-Ansicht. Was passiert auf desktop-Ansicht ist die videos sind auch unter einander, als Sie sollten Seite an Seite / nebeneinander.
    • In den media queries (max-width: 767px) versuchen Sie die max-Breite auf die gewünschte Größe des Bildschirms, ich glaube 500 Pixel ist eine gute Zahl. Also Bildschirme mit einer Breite größer als 500 Pixel wird nicht haben Sie videos unter einander.
    InformationsquelleAutor Jefferson Ribeiro
  2. 0

    Haben Sie versucht, etwas hinzuzufügen, um Ihre Medien-Abfrage, entfernen Sie den Schwimmer und maximieren die Breite? edit: man könnte eigentlich brauchen, um genauer zu sein, da Sie mit #'s auf die divs so #home1, #home2 { width: 100%; float: none; } – Beispiel hier http://codepen.io/evanrbriggs/pen/pwkHj

    InformationsquelleAutor Evan
Schreibe einen Kommentar