サイトの表示速度を落とさずに、ワードプレスに動画を埋めこみたいですか?

今回紹介するのは、プラグインを使った方法です。動画を直接埋め込むと、容量にもよりますが、サーバーに負荷がかかり、サイト自体が重くなるリスクがあります。

なので、YouTubeもしくはVimeoに一度アップロードしてから、動画をシェアする形でワードプレスに埋め込むことを推奨します。そうすることによって、サーバーに負担をかけず、すぐにページが表示され、離脱を防ぐことが出来るからです。

では実際に僕がやっていることを、一からお話していきますね。

この手順通りにやっていただければ、あなたのワードプレスブログに動画を埋め込むことが出来ます。

それでは早速、一緒にやっていきましょう。

ワードプレスブログに動画を埋め込む方法

プラグイン「Shortcodes Ultomate」をインストール

 

まずは「Shortcodes Ultimate」というプラグインをインストールします。

インストール方法は、この順で行います。

まずはワードプレスにログインしましょう。

そして左側にあるメニュー欄に プラグイン をクリック。※隣に赤丸に1というマークは関係ありません。

 

次に 新規追加 をクリック。

 

 Shortcodes Ultimate と入力します。

途中まで入力すると、プラグインが表示されるかと思います。

 

プラグインが表示されたら 今すぐインストール をクリック。

 

 今すぐインストール から 有効化 に表示が変わったらクリック。

 

記事作成画面に ショートコードを挿入 と書かれたボタンが出現するば、完了です。

 

YouTube動画を埋め込む

YouTube動画の埋め込み方法は、 YouTube  「YouTube advanced」 2通りあります。

 

動画の表示方法にこだわりが有る方は YouTuve advanced 

動画の表示方法にこだわりが無い方は YouTube を使いましょう。

ではまずは、こだわりが有る方向けに説明していきます。

 YouTuve advanced こちらをクリック。

 

設定ページが表示されます。※ページが縦長なので、写真を分割して説明していきます。

ここで設定出来ることは

  1. URL
  2. プレイリスト
  3. 高さ
  4. レスポンシブ
  5. コントロール
  6. 自動的に隠す
  7. タイトルバーを表示
  8. 自動再生
  9. ループ
  10. 関連動画
  11. フルスクリーンボタンを表示
  12. modestbranding
  13. テーマ
  14. 強制HTTPS
  15. WMode
  16. Plays inline
  17. 別のCSSクラス

 

1, URL設定方法

 

埋めこみたい動画ページにある 共有 をクリック。

 

そして コピー をクリック。

 

これでYouTube動画URLのコピーは完了です。あとは、これをYouTube advancedの設定ページにペースト(貼り付け)します。

2, プレイリスト

 

 

3,

 

 

 

4, 高さ

 

 

5, レスポンシブ

 

6, コントロール

 

 

6, 自動的に隠す

 

 

 

Vimeo動画を埋め込む

 

ここで設定できるのは「幅」「高さ」「レスポンシブ」「自動再生」この4つ。

Vimeoのロゴを消したり、音量バーを隠すといった設定は、Vimeo設定ページで行います。

 

 

他者動画を埋め込む場合の注意点