2 nebeneinander youtube videos Bootstrap 3

Question

Ich habe ein Problem mit meinem Responsive eingebetteten Youtube, wo ich 2 Videos nebeneinander habe. Es sieht gut aus, bis die Bildschirmgröße mobil ist. Anstatt übereinander zu stapeln, werden sie wie in diesem Bild zu kleinen Kästen verkleinert.

Hier ist meine Seite dieses auf http://www.pscompetitiveedge.com/references.html ist

HTML-Code für diesen oberen Teil der Seite:

<h1>References</h1> 
 

 
<div class="row"> 
 
<div class="col-sm-6"> 
 
<div class="embed-responsive embed-responsive-16by9"> 
 
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?"></iframe> 
 
<p>Click Above To View Testimonial Video!</p> 
 
</div> 
 
</div> 
 

 
<div class="col-sm-6"> 
 
<div class="embed-responsive embed-responsive-16by9"> 
 
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?"></iframe> 
 
<p>Click Above To View Peter In Seminar Action!</p> 
 

 
</div> 
 
</div></div> 
 
<div class="clearfix"></div>

Answer 1

Sie diese Codes haben. in "custom.css: 335"

@media (max-width: 500px) 
.col-sm-6 { 
    width: 20% !important; 
    float: left; 
} 

Ändern es an:

@media (max-width: 500px) 
.col-sm-6 { 
    float: left; 
} 

Answer 2

Das folgende reaktions einbetten gilt für jede Anordnung des Fluid Raster-Layout-Bootstrap (und eigentlich jedes Element, das nicht Inline ist). Alles, was wir in einem flexiblen Container im Internet tun müssen, ist dieses CSS, das ursprünglich aus http://embedresponsively.com/ stammt. Darüber hinaus müssen wir die festen width und height Eigenschaften aus dem Video Iframe oder Embed Container entfernen.

.embed-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    overflow: hidden; 
 
    max-width: 100%; 
 
    margin-bottom: 1em; 
 
} 
 

 
.embed-container iframe, .embed-container object, .embed-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container-fluid"> 
 
    <div class="col-sm-6"> 
 
    <div class="embed-container"> 
 
     <iframe src="https://www.youtube.com/embed/oAPdNKTrBYA" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div class="embed-container"> 
 
     <iframe src="https://www.youtube.com/embed/fHFSX3Vd9D0" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

ansehen Schnipsel in vollem Umfang nutzen ihre Ansprechbarkeit zu beobachten.

Answer 3

Versuchen Hinzufügen dieses auf, was Sie hatte vor:

.embed-responsive{ 
    width: 100%; 
    display: block; 
}