ブログにYouTube動画を埋め込んだら、「スマホで見るとサイズが崩れる」「横にはみ出す」といった経験はありませんか？
現在のWordPressでは、基本的にURLを貼るだけで自動的にレスポンシブ対応されますが、テーマや設定によってはうまく表示されないケースもあります。
この記事では、
・まずは一番簡単な埋め込み方法
・それでも崩れる場合のCSSでの対処法
この2段構えで、YouTube動画をスマホ最適化する方法をわかりやすく解説します。
レスポンシブとは？
「レスポンシブWebデザイン」とは、PC・タブレット・スマートフォンなど、画面サイズの違いに応じてレイアウトを自動調整し、どの端末でも見やすく表示する仕組みのことです。
1つのデザインで複数の端末に対応できるため、管理や更新がしやすいのも大きなメリットです。YouTube動画の埋め込みも、この考え方に合わせて調整することで、スマホでも見やすく表示できます。
WordPressでYouTubeを埋め込む基本
現在のWordPressでは、YouTubeの動画URLをそのまま記事本文に貼り付けるだけで、自動的に埋め込み表示され、レスポンシブ対応も行われます。
手順はとても簡単です。
- YouTubeで動画のURLをコピー
- WordPressの本文にそのまま貼り付ける
- プレビューで表示を確認する
多くのテーマでは、これだけでスマホ・タブレット・PCすべてに最適化されたサイズで表示されます。
まずはこれを試してください。
それでもサイズが崩れる場合の対処法
テーマやカスタマイズ状況によっては、URL貼り付けだけでは動画サイズがうまく調整されないことがあります。
その場合は、CSSを使って強制的にレスポンシブ対応させる方法が有効です。
CSSとHTMLタグをカスタマイズ
CSSスタイルシートに以下のコードをそのままコピペして貼り付けます。
.video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
埋め込みコードの設定
WordPressの「カスタムHTML」ブロックを使い、YouTubeの埋め込みコードを次のように
で囲みます。
<div class=”video”>
YouTubeの埋め込みコード
</div>
作業は完了です。これで、画面幅に応じて自動的にサイズ調整される動画表示になります。
埋め込み時に使える便利な設定（パラメータ）
ここからは、埋め込みコードを使う場合に指定できる「パラメータ」について解説します。
標準設定では埋め込み動画は再生が終わると関連動画が画面に表示されます。
関連動画を表示しないようにするには「rel」パラメータを使います。
下記にカスタマイズの一部を記載しました。
埋め込みコードを使う場合、URLの末尾にパラメータを追加することで挙動をカスタマイズできます。
よく使われる例は次の通りです。
関連動画の表示を抑制：rel=0
自動再生：autoplay=1（※環境によっては音声付き再生は不可）
途中から再生：start=秒数
途中で停止：end=秒数
開始と終了を同時指定：start=30&end=60
コントロール非表示：controls=0
具体的なコード例は次の表を参照してください。
| 設定カスタマイズ | 方法 | 例文 |
| おすすめ動画を非表示 | 「?rel=0」を追加 | <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?rel=0” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> |
| 自動再生 | 「?autoplay=1」を追加 | <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?autoplay=1&mute=1” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> |
| 途中から再生 | 「?start=秒数」を追加 | <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?start=30” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> |
| 動画を途中で停止 | 「?end=秒数」を追加 | <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?end=30” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> |
| 途中で再生して停止 | 「?start=秒数」を追加 「&end=秒数」をさらに追加 | <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?start=30&end=60” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> |
| コントロールパネルの非表示 | 「?controls=0」を追加 | <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?controls=0” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> |
これらは iframe の src のURLの末尾に追加して使います。
※ これらのパラメータは、YouTubeやブラウザの仕様変更により、期待通りに動作しない場合があります。
※ 最近のブラウザでは、autoplay=1 だけでは再生されず、&mute=1 を併用しないと自動再生されない場合があります。
関連記事
おわりに
現在のWordPressでは、YouTube動画はURLを貼るだけで簡単にレスポンシブ対応できます。
それでも表示が崩れる場合は、この記事で紹介したCSSを使った方法を試してみてください。
環境に合わせて最適な方法を選べば、スマホでも見やすい動画ページを作ることができます。
コメント