超便利！youtubeの動画をCSSでレスポンシブ対応させる

コーディング

2017年4月25日

youtubeの動画を埋め込むとき、縦横比固定でレスポンシブ対応するCSSをご紹介します。コード量も少なくて、とっても便利です！

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.movie {

position: relative;

width: 100%;

padding-top: 56.25%;

}

.movie iframe {

position: absolute;

top: 0;

right: 0;

width: 100% !important;

height: 100% !important;

}

超便利！youtubeの動画をCSSでレスポンシブ対応させる

この記事の関連キーワード

気になる記事のカテゴリー

最新記事

人気のキーワード