float on embed youtubeビデオが消えるようにする

Question

2つのdivsをインラインにしたい。最初のdivはyoutubeから埋め込まれたビデオです。 2番目のdivにはテキストがあります。私はフロートでクリアしてみましたが、これを使うとビデオが消えます。私はディスプレイで試しました：インラインブロックですが、私は同じ結果を受けました。私はclear:bothの下の空のdivで試したが、結果は満足できなかった。私は本当にどこに問題があるか知りたいですか？ビデオコンテナが応答します。多分、これは問題を引き起こす可能性がありますか？私は以下のコードのセクションを添付します。

.desc { 
 
    border-left: 4px solid #80d4ff; 
 
    padding: 6px 10px 8px 6px; 
 
    text-indent: 5px; 
 
    background-color: #fff; 
 
} 
 

 
.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    overflow: hidden; 
 
    margin: 15px 0; 
 
} 
 

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

 
.videoHndl { 
 
    max-width: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
}

<div class="videoHndl"> 
 
    <div class="video-container"> 
 
    <iframe width="500px" height="280" src="https://www.youtube.com/embed/HRbD4UcK-0I"> 
 
      </iframe> 
 
    </div> 
 
    <div class="desc"> 
 
    <p><b>Description:</b></p> 
 
    <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p> 
 
    </div> 
 
</div>

Answer 1

は私がどうなるかです：

.desc{ 
 
    margin-left: 500px; 
 
    border: 1px black solid; 
 
    border-left: 4px solid #80d4ff; 
 
    padding: 6px 10px 8px 6px; 
 
    text-indent: 5px; 
 
    background-color: #fff; 
 
} 
 
.video-container { 
 
    float: left; 
 
    clear: left; 
 
    padding-bottom: 56.25%; 
 
    overflow: hidden; 
 
    width: 500px; 
 
    height: 280px; 
 
    border: 1px green solid; 
 
} 
 

 
.videoHndl{ 
 
    width: 800px; 
 
    height: 400px; /* to be updated to the desired height */ 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px blue solid; 
 
}

<div class="videoHndl"> 
 
    <div class="video-container"> 
 
     <iframe width="500px" height="280" 
 
     src="https://www.youtube.com/embed/HRbD4UcK-0I"> 
 
     </iframe> 
 
    </div> 
 
    <div class="desc"> 
 
     <p><b>Description:</b></p> 
 
     <p>Some text Some text Some text Some text Some text Some text 
 
     Some text Some text Some text Some text Some text Some text Some 
 
     text Some text Some text Some text </p> 
 
    </div> 
 
</div>

Answer 2

<div>タグが自動的に新しい行を取るレンダリングするとき、あなたの代わりに

Answer 3

を<span>タグを試してみたいことがありますあなたは、ピクセルの幅を追加する必要があり、コード下記参照、このコードは役立ちますあなたのCSSを修正するためのあなた。

.desc { 
 
    border-left: 4px solid #80d4ff; 
 
    padding: 6px 10px 8px 6px; 
 
    text-indent: 5px; 
 
    background-color: #fff; 
 
    float: left; 
 
    width: 150px; 
 
} 
 

 
.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    overflow: hidden; 
 
    margin: 15px 0; 
 
    float: left; 
 
    width: 300px; 
 
} 
 

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

 
.videoHndl { 
 
    max-width: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
}

<div class="videoHndl"> 
 
    <div class="video-container"> 
 
    <iframe width="300px" height="280" src="https://www.youtube.com/embed/HRbD4UcK-0I"> 
 
     </iframe> 
 
    </div> 
 
    <div class="desc"> 
 
    <p><b>Description:</b></p> 
 
    <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p> 
 
    </div> 
 
</div>

Answer 4

ため.videoコンテナはiframeのために絶対に位置を設定する原因

.desc{ 
    border-left: 4px solid #80d4ff; 
    padding: 6px 10px 8px 6px; 
    text-indent: 5px; 
    background-color: #fff; 
} 
.video-container { 
    overflow: hidden; 
    margin: 15px 0; 
    width: 100%; 
} 
.videoHndl{ 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: flex; 
    justify-content: flex-start; 
} 

Answer 5

その、 .videoコンテナオブジェクト、 .video-このCSSコードを試しますコンテナ埋め込みクラス。パラメータを削除し、ビデオハンドル用にfloat：leftを設定すると、2つのdivを並べて見ることができます。編集したCSSはこのようになります。ここで

.video-container iframe, 
.video-container object, 
.video-container embed { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.videoHndl{ 
    max-width: 500px; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    float:left; 
    }