Responsive Video Standardgröße

Question

ich eine Website Bootstrap verwenden haben und auf den Kern meiner Seite habe ich ein Bild und unten ist ein YouTube-Video eingebettet:

<div class="col-xs-12 col-sm-12"> 

     <a href="tech.php"> 
     <img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600"> 
     </a> 

     <br> 

     <div class="embed-responsive embed-responsive-16by9"> 
     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen></iframe> 
     </div> 

    </div> 

Link to website here.

Als ich zuerst laden Sie diese Seite Was ich mit dieser Lösung sehe (und nicht mag) ist, dass mein Video unter meinem Bildschirm erscheint. Also bin ich auf der Suche nach einer Möglichkeit, die Größe meines Bildes und Videos als Verhältnis der Bildschirmgröße zu bestimmen, so dass sich mein Video so verändert, dass es innerhalb der Grenzen des Bildschirms bleibt.

Ich habe nach Ideen im Internet gesucht (d. H. Css bearbeiten as in here), aber ich verliere mich oder es tut nicht, was ich erwarte.

Irgendeine Idee?

Answer 1

Wenn Sie nur einen CSS-Eintrag hinzufügen, um die minimale Höhe des Videos anzugeben, wird es beim Laden nicht abgeschnitten und der Bootstrap sorgt dafür, dass das Verhältnis bei der Größenänderung beibehalten wird. Code:

.embed-responsive{ 
    min-height:100%; 
} 

Natürlich werden Sie wahrscheinlich wollen die div ein wenig genauer zielen, aber ich denke, das tun sollten, was Sie nach.

Answer 2

ich darüber anders gehen würde, würde ich nicht ein absolutes positioniertes Element für Video verwenden, und ich würde eine height oder min-height gesetzt Darstellungseinheiten vh

So zu verwenden, es könnte wie folgt aussehen:

#youtube-video { 
    width: 100%; 
    min-height: 40vh; 
} 

Und entfernen Sie alle absolute Positionierung auf diesem Element.

Zusätzlich möchten Sie vielleicht eine ID oder Klasse auf dem oberen Behälter setzen und geben es einige margin-top Ihren festen Header zum Ausgleich:

#top-container { 
    margin-top: 50px; 
} 

Schließlich würde ich die footer außerhalb des Bootstrap-Behälter vollständig bewegen, indem die Bewegungs </div> über Ihre footer zu sein.