と9比率の映像は、私は、次のワイヤーフレーム用のHTMLレイアウトを構築しようとしています。最初のブートストラップはcol-8で、2番目のブートストラップはcol-4です。16： - コンテンツの <a href="https://i.stack.imgur.com/Xijtp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xijtp.png" alt="enter image description here"></a></p> <p>その基本的に2つの列、他の応答のコンポーネント
最初の列の内側に、使用可能な幅（66％）に応じてサイズ変更する必要のあるビデオコンポーネントがあります。このため、私は次のCSSコードを使用しています -
.video-embed {
position: relative
padding-bottom: 56.25%
height: 0
overflow: hidden
iframe {
position: absolute
top: 0
left: 0
width: 100%
height: 100%
}
}
以下のビデオは100％幅の300pxの高静的コンテンツです。これはいくつかの画面でビューポートの少し下に行くかどうか気にしない。
もう一方の列には、明示的に高さを設定せずに比率を維持するために、上のようなコードを再び使用している4：3コンテナがあります。
以下では、ページ内の利用可能な高さを単に占有する必要があるセクションが必要です。
しかし、その上の要素（4:3）の高さが固定されておらず、ビデオの高さも固定されていないため、この最後のコンポーネント（右下）をレイアウトできません。
ブートストラップで正しい方向に進むのですか？これらすべてのものをレイアウトするために私が従うことができる他のレイアウト技術はありますか？
このレイアウトの最も重要な部分は16：9ビデオです。私はちょっとUIデザインに新しいので、それを見つけるのは難しいです。
ありがとうございます！ （https://www.w3schools.com/bootstrap/bootstrap_images.asp @応答埋め込み機能を参照してください）あなたはどのバージョンのブートストラップ言いませんが、バージョン3.2以降に内蔵の組み込みクラスを使用することができます