YouTubeの動画を同じ行に挿入するにはどうすればよいですか？

YouTubeの両方の動画を同じ行に入力したいと思います。 iframeを調整してラッパーを作成しようとしましたが、正しいものをターゲットにしているようには見えません。どこが間違っているのか分かりません。ここに私のJFiddleです：以下に示すようにhttps://jsfiddle.net/6a73m27n/YouTubeの動画を同じ行に挿入するにはどうすればよいですか？

.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>

出典

2016-05-13 dancemc15

すみませんが、私は、あなたが「行」で何を意味するかわかりません。あなたはそれらを互いの上に積み重ねておきたいですか？ –

あなたのコードは動作しますが、両方が同じ行に収まるようにしてください。これを達成するには、ラッパーに少なくとも800ピクセルの幅が必要です。 – Chris

2つのビデオをお互いに（正確に2つの）隣り合わせにするには、iframeにwidth：50％を入れなければなりません。 –

ちょうど割合でビデオの幅に言及：

<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>

出典

2016-05-13 18:47:50

あなたが持っている場合、それは実際に動作しますそれらの両方のために十分な幅を1行に表示します。それにもかかわらずは、私の代わりに、IFRAMEにこのスタイルを置くためにあなたをお勧めします：

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

出典

2016-05-13 18:51:04 Siavas

YouTubeの動画を同じ行に挿入するにはどうすればよいですか？

答えて

関連する問題