WordPressでYouTube動画を自動再生・消音で埋め込む方法【クリックでリンク遷移も可能】

YouTube動画を自動再生・消音（ミュート）状態で埋め込みたいとき、WordPressの「カスタムHTML」ブロックを使えば簡単に実現できます。ここでは、実際に動画がページ読み込みと同時に再生され、クリックすると会社紹介ページなど別URLに遷移する仕組みを紹介します。

1. 動画のURLを確認する

例として、次のYouTube動画を使用します。
https://www.youtube.com/watch?v=mH88CpZ0k18

このURLの「v=」以降が動画IDです。つまり動画IDは「mH88CpZ0k18」。

2. カスタムHTMLにコードを貼り付ける

WordPressの編集画面で「＋」 → 「カスタムHTML」ブロックを追加し、以下のコードをそのまま貼り付けます。

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; width:100%; cursor:pointer;"
     onclick="window.location.href='/company'">
  <iframe
    src="https://www.youtube.com/embed/mH88CpZ0k18?autoplay=1&mute=1&loop=1&playlist=mH88CpZ0k18&controls=0&modestbranding=1&rel=0&fs=0&disablekb=1"
    style="position:absolute; top:0; left:0; width:100%; height:100%; border:0; pointer-events:none;"
    allow="autoplay; encrypted-media"
    allowfullscreen>
  </iframe>
</div>

3. コードのカスタマイズポイント

設定	内容
/company	クリック時に遷移するリンク先（任意のURLに変更）
autoplay=1	ページ読み込みと同時に自動再生
mute=1	音を消して再生（これがないと自動再生不可）
loop=1&playlist=mH88CpZ0k18	同じ動画をループ再生
controls=0	再生ボタンなどの操作UIを非表示
modestbranding=1	YouTubeロゴを最小限に表示
rel=0	関連動画を非表示
fs=0	全画面ボタンを非表示
disablekb=1	キーボード操作を無効化（UI表示防止）

4. スマホでもきれいに表示するコツ

このコードはレスポンシブ対応済みです。デバイスの画面幅に合わせて自動的にサイズが調整され、16:9の比率を維持します。YouTubeブロックよりもデザインの統一感が出ます。

5. 注意点

• 一瞬だけ「YouTube」ロゴや「後で見る」アイコンが表示されるのはYouTubeの仕様上避けられません。
• ただし、modestbranding=1とcontrols=0の設定で最小限にできます。
• 完全にロゴを消したい場合は、動画をMP4形式で保存し、<video>タグで再生する方法が最も確実です。

6. 実際の表示イメージ

まとめ

YouTube動画の埋め込みは、そのままだと再生ボタンや関連動画など余計な要素が表示されます。今回の方法を使えば、

• 自動再生＋ミュート
• ループ再生
• クリックで別ページに移動
• スマホ対応（レスポンシブ）

といった、洗練された動画演出をシンプルなHTMLだけで実現できます。
会社紹介ページやブランドサイトのファーストビューにおすすめです。