2016-05-13 7 views
0

Ich möchte meine beiden YouTube-Videos auf dieselbe Zeile setzen. Ich habe versucht, den Iframe anzupassen und einen Wrapper zu erstellen, aber es scheint nicht, als ob ich die richtigen Dinge anvisiere. Ich bin mir nicht sicher, wo ich falsch gelaufen bin. Hier ist mein JFiddle: https://jsfiddle.net/6a73m27n/Wie kann ich meine YouTube-Videos auf dieselbe Zeile setzen?

.content { 
 
    margin-top: 15px; 
 
} 
 

 
iframe { 
 
    float: left; 
 
}
<div class="video_wrapper"> 
 
    <iframe width="400" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe> 
 
    <iframe width="400" height="300" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe> 
 
</div>

+2

Es tut mir leid, aber ich bin nicht sicher, was Sie unter „Linie“ bedeuten. Willst du, dass sie übereinander gestapelt werden? –

+3

Ihr Code funktioniert, stellen Sie nur sicher, dass sie beide * passen * in der gleichen Zeile. Um dies zu erreichen, benötigen Sie mindestens 800 px an Breite. – Chris

+1

Wenn Sie zwei Videos nebeneinander (und genau zwei) wollen, müssen Sie 'width: 50%' für den 'iframe' setzen. –

Antwort

0

erwähnen Sie einfach die Breite des Videos in Prozent wie folgt:

<div class="video_wrapper"> 
 

 
<iframe width="40%" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe> 
 
<iframe width="40%" height="200" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>

0

Es funktioniert tatsächlich, wenn Sie genug Breite für beide auf einer Linie. Trotzdem würde ich dir empfehlen dieses Styling auf die iframe zu setzen statt:

iframe { 
    display: inline-block; 
    vertical-align: top; /* or middle, bottom, baseline by your preference */ 
} 
Verwandte Themen