BloggerでYouTube埋め込みを幅いっぱいに広げる！レスポンシブ対応CSS

ブログ記事にYouTube動画を埋め込む際、動画の幅を固定してしまうとスマホやタブレットで見たときに小さく表示されてしまったり、デザインが崩れたりすることがあります。

そこで、動画を ページの幅いっぱいに広げる方法 を知っておくと、どの端末からでも見やすく、美しいレイアウトを保つことができます。この記事では、幅いっぱい表示を実現するためのCSSと埋め込み方法を解説し、さらに補足として自動再生やミュートといった便利な機能も紹介します。

幅いっぱい表示の基本CSS

YouTube動画をレスポンシブ対応にして幅いっぱいに表示するには、iframe を包む親要素にCSSを指定します。縦横比（16:9）を保ちながら幅を100%にするのがポイントです。

HTML

<!-- YouTube動画幅いっぱい表示 -->
<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/動画ID" 
          frameborder="0" 
          allowfullscreen>
  </iframe>
</div>
  

CSS

<style>
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9比率 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
  

この方法で、どんな画面サイズでも動画がページ幅にフィットするようになります。

自動再生・ミュートの設定

幅いっぱい表示に加えて、埋め込んだ動画を 自動再生したい場合 や 最初から音声をミュートしたい場合 は、iframeのURLにパラメータを追加します。

<!-- YouTube動画 自動再生＋ミュート -->
<iframe src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1" 
        frameborder="0" 
        allowfullscreen>
</iframe>
  

• autoplay=1：ページ読み込み時に自動再生 
• mute=1：最初からミュート

まつさん
レスポンシブ対応なのでスマホから見ても全幅に広がってくれます。