以前youtube等の動画をレスポンシブで表示させる記事を書いたんですが。
youtube動画をレスポンシブで表示させる
これに落とし穴がありました。。。
動画の設置されている親要素に、display: flex;が設定されているとき、
Fire foxでは表示されないんですね、というかIEもでした、、
びびりました。。flexを動画のコンテナに設定したことがなかったので全然気づきませんでした。。
普通にheight:0;で、真っ白になります!
それを解消してくださったのが下記のサイトです。
[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック
正直、こちらのサイトのコピペです。
<div class="movie-container"> <iframe>動画の内容が入ります</iframe> </div>
.movie-container { display: grid; grid-template-columns: repeat(16, 5.625vw); grid-auto-rows: 5.625vw; } .movie-container iframe { grid-column: span 16; grid-row: span 9; width: 100%; height: 100%; }
CSSにはこんなワザがあるんですね、、勉強になりました!