YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

こんにちは、NEOです。記事をご覧いただきましてありがとうございます。

 

動画(YouTube動画)をブログに載せることによって、ユーザーにより多くの情報を分かりやすく伝えることができますし、滞在時間が長くなるためSEO的にもプラスに働きます。

 

また、近年はスマートフォンからのネット利用者が増加しているので、YouTube動画の表示サイズをスマートフォン用に自動調整する(レスポンシブ対応)ことは必須です。

 

そこで今回は、「YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)」をご説明します。

 

Sponsored Link

 

YouTube動画をWordPressに埋め込む方法

埋め込みコードを取得する

WordPressに埋め込みたいYouTube動画の[共有]→[埋め込みコード]をクリックしてください。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

[埋め込みコード]のすぐ下に埋め込みコードが表示されますので、コピーしてください。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

埋め込みコードを貼り付ける

埋め込みコードをコピーしましたら、WordPressの投稿画面のテキストエディタに貼り付けることで、記事にYouTube動画を埋め込むことができます。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

ただ、このままでは、スマートフォンで見た時にYouTube動画が画面からはみ出してしまいます。

 

なぜなら、YouTube動画がレスポンシブ対応していないため、スマートフォンでもデフォルトサイズで表示されてしまうからです。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

最近はスマートフォンからのアクセスが非常に多いので、YouTube動画の表示サイズをスマートフォン用に自動調整することは必須です。

 

YouTube動画をレスポンシブ対応

YouTube動画をレスポンシブ対応するために、「Advanced Responsive Video Embedder」というプラグインをインストールします。

 

「Advanced Responsive Video Embedder」をインストール

1. [プラグイン]→[新規追加]をクリックしてください。

 

2. [プラグインを追加]画面で「Advanced Responsive Video Embedder」を検索し、[今すぐインストール]ボタンをクリックしてください。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

3. インストールが完了しましたら、[プラグインを有効化]をクリックしてください。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

「Advanced Responsive Video Embedder」の設定

1. [設定]→[A.R. Video Embedder]をクリックしてください。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

2. [Align Maximal Width](動画の横幅)の値を記事本文の横幅より小さく設定してください。

 

例えば、記事本文の横幅が600pxでしたら、「560」pxに設定します。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

 

「Advanced Responsive Video Embedder」の使用方法

1. 投稿画面を開いてテキストエディタに切り替え、[Embed Video]ボタンをクリックしてください。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

2. 表示された画面の以下の4項目を設定し、[Insert Shortcode]ボタンをクリックすると、テキストエディタにショートコードが配置されます。

 

  • URL/Embed Code(URL/埋め込みコード) → 埋め込みコードを貼り付け
  • Mode(設置形式) → Normalを選択
  • Align(配置) → centerを選択
  • Autoplay(自動再生) → noを選択

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

3. 記事を投稿(更新)して、スマートフォンでYouTube動画を確認しますと、このようにスマートフォン用の表示サイズに自動調整されていることが確認できます。

 

YouTube動画をWordPressに埋め込む方法(レスポンシブ対応)

 

 

この記事が少しでもあなたのお役に立てれば幸いです。

 

ご不明な点などございましたら、いつでもお問い合わせくださいね。

この記事を読んだ方は、こちらも読んでいます。

Sponsored Link

 

コメントを残す

ページトップへ