動画のレスポンシブの落とし穴

以前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にはこんなワザがあるんですね、、勉強になりました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


top