Flex に埋め込まれたレスポンシブ YouTube

Question

レスポンシブな YouTube とその他のコンテンツを Flex コンテナに埋め込もうとしましたが、YouTube の埋め込みが含まれるコンテナが拡大しないため、他の要素と重なったり重なったりしてしまいます。うまく説明できたかどうかわからないので、コードとボックスも作成して説明します。

https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.js

リーリー

埋め込みコンテナが埋め込みビデオのサイズに合わせて拡大または縮小するように変更するにはどうすればよいですか? ご協力いただきありがとうございます＃＃＃

Answer 1

更新

これは codesandbox ソリューションです。

1. iframe を position: "relative" のコンテナでラップし、その
   を設定します 幅: "100%" 。
2. コンテナの paddingBottom を目的の
   に設定します パーセンテージで表されるアスペクト比値。たとえば、アスペクト比 16:9 の場合、 "56.25%" (9 / 16 * 100%) を使用します。
3. iframe を 位置: "絶対"、上: 0、左: 0、幅: "100%"、高さ: "100%" に設定します。
4. ビデオの下のテキストが非表示にならないようにするには、flexFlow: "column",
を設定してください。

これを実現する方法の例を次に示します:

リーリー

他のコード

リーリー