BloggerでYouTubeを幅いっぱいに表示 + パラメータ

1. CSSの効果

【YouTubeのレスポンシブ・ラップ表示】
埋め込み動画がメインカラムからはみ出す問題を解決し、画面サイズに合わせて最適化します。アスペクト比を維持したまま横幅いっぱいに表示される、Bloggerに最適な実装です。

2. CSSの特徴

• アスペクト比の完全維持
  padding-top: 56.25% を活用することで、画面幅が変わってもYouTube標準の16:9比率を崩さず表示します。
• メインカラム追従型
  max-width: 100% を設定しているため、Bloggerのテンプレートサイズやスマホ画面からはみ出すことなく、常に親要素の幅にフィットします。
• インライン属性の無効化
  埋め込みコードに含まれる固定値（width="560"など）をCSSの !important で上書きし、レスポンシブ動作を優先させています。

3. 紹介コード

<div class="youtube_wrap">
YouTube 埋め込みURL
</div>

<style>
/* メインカラムからのはみ出しを防止し、16:9を維持するCSS */
.youtube_wrap {
    position: relative;
    width: 100%;
    max-width: 100%; /* 親要素(メインカラム)の幅を超えないように制限 */
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    margin: 0 auto;
    overflow: hidden; /* はみ出しを物理的にカット */
}

.youtube_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* インライン指定のwidthを無効化 */
    height: 100% !important; /* インライン指定のheightを無効化 */
    border: 0;
}
</style>
  

4. 「自動再生」+「ミュート」のパラメータ追加の説明

• 設定方法
  埋め込みコード内にある src 属性のURL末尾に &autoplay=1&mute=1 を追記します。
• 動作の仕組み
  近年のブラウザ仕様により、音が出ている状態での自動再生はブロックされます。そのため、自動再生（autoplay=1）を有効にする場合は、必ずセットでミュート（mute=1）を設定する必要があります。