[サクッと]レスポンシブ対応Youtube埋め込み[CSS]

比率を保ったままレスポンシブで拡大・縮小できるYoutube埋め込み。

サンプル

HTML

<div class="youtube-wrapper">
  <div class="youtube-container">
    ここにYoutubeの埋め込みコード
  </div>
</div>

CSS

.youtube-wrapper {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.youtube-container {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  padding-top: calc(9 / 16 * 100%);
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container .video {
  position: inherit;
  padding-bottom: 0;
  margin-top: 0;
  height: auto;
  overflow: auto;
  max-width: none;
}

簡単な解説

.youtube-wrapper {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

「max-width」に動画の最大横幅サイズを設定。

.youtube-container {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  padding-top: calc(9 / 16 * 100%);
}

「padding-top」に表示したい動画の縦横比を設定。