06 August

ワードプレスに動画を埋め込んでみた

Youtubeの動画をワードプレスに埋め込みたい、ブログを書いているとそう思う時がありますよね。

ブログに埋め込むことによってYoutubeに動画を上げている方はブログからの流入も期待できます。

ワードプレスプレスの記事内にYouTube動画を埋め込む方法を解説します。
プラグインを使って動画を埋め込む方法と、投稿に直接URLを書き込む方法を解説していますので、自分に合った方法でやってみましょう。

動画を埋め込む方法は簡単にできるものばかりなので参考にしてみてください。

プラグインを使って動画を埋め込む

TinyMCE Advanced

1つ目は、ビジュアルエディタ機能を拡張することができる人気プラグイン「TinyMCE Advanced」を使ってYouTubeの動画を埋め込む方法です。

まず、投稿に埋め込みたいYouTube動画を表示して、動画の下に表示されている「共有」をクリックします。

共有をクリックすると、共有先を選択する画面が出ます。
埋め込む」をクリックしてください。

埋め込むをクリックすると、動画の埋め込みの詳細が表示されます。
動画の再生を開始する位置などを設定したりできますが、基本的にデフォルトのままで問題ないです。

一番上に表示されている埋め込みコードをコピーします。
これでYouTube側の作業は完了しました。

次は、ワードプレスの投稿画面を開きます。
TinyMCE Advancedをインストールするとエディタ機能が追加されているので「挿入」→「メディア」の順にクリックしてください。

メディアを挿入/編集」というメニューが表示さるのでクリックします。
埋め込む」のタブを選択し、テキスト入力欄にYouTubeでコピーした動画の埋め込みコードを貼り付けます。

コードを貼り付けたら「OK」をクリックしてください。
これでyoutubeの動画を埋め込むことが出来ました。

念の為プレビューで投稿を確認してるとyoutubeの動画が挿入されていることがわかります。
TinyMCE Advancedを使ってYouTube動画を投稿記事に埋め込む方法は以上です。

Shortcodes Ultimate

2つ目は、使いやすいユーザーインターフェイスでリンクボタンやタブの設置などの様々な機能をショートコードを用いて追加することができるプラグイン「Shortcodes Ultimate」を使ったYouTube動画の埋め込み方法です。

まず、YouTube動画のURLをコピーします。
TinyMCE Advancedのように「共有」を開く必要はなく、ブラウザに表示されているURLを直接コピーします。
YouTube側の作業はこれで終了です。
TinyMCE Advancedよりもシンプルです。

次に、ワードプレスの投稿画面を開きます。
Shortcodes Ultimateをインストールすると「ショートコードを挿入」が追加されているのでクリックします。

そうすると機能一覧が表示されますので「YouTube」をクリックします。

URLのところにYouTubeのURLを入力します。
基本的に他は何も変更しないで問題ありません。
機能の詳細はこんな感じです。

幅:動画の幅を指定。
高さ:動画の高さを指定。
レスポンシブ:「はい」を選択すると「幅/高さ」の設定に関係なくユーザーの閲覧するデバイスの画面サイズに合わせて最適化されます。(デフォルトで「はい」になってます。)
自動再生:「はい」を選択するとユーザーがページを開いた際に自動で動画が再生されます。
別のCSSクラス:別のCSSクラスを使う場合に使用します。
(自動再生はスマホユーザーのデータ通信量を無意味に使ってしまう為、オフのままが良いと思います。)

URLの貼り付けが終わったら「ショートコードを挿入」をクリックしてください。
ライブプレビュー」をクリックするとプレビューを確認することもできます。

これでショートコードが挿入されました。
TinyMCE Advancedとは違って、YouTubeが直接表示されることはなくコードだけが表示になってますね。

投稿記事のプレビューを確認してみると埋め込まれているとこがわかりますね。レスポンシブ設定が「はい」になっているので画面サイズに合わせて表示されているのもわかります。

Shortcodes Ultimateを使ってYouTube動画を投稿記事に埋め込む方法は以上です。

投稿記事に直接書く方法

最後に、プラグインを使わずに投稿記事に直接YouTubeを埋め込む方法を解説します。
一番シンプルな方法で動画を埋め込むことができます。

YouTubeから埋め込みたい動画のURLをコピーします。

ワードプレスの投稿画面を開き、コピーしたURLを動画を埋め込みたい場所に貼り付けるだけです。

YouTubeの動画URLを貼り付けると自動でYouTube動画が表示されるようになっています。

プレビューを確認してみると今までと同様に、レスポンシブで同じサイズのYouTubeの埋め込稀ています。
URLを投稿記事に直接貼り付ける方法は以上となります。

この方法でやるとURLを貼り付けるだけでYouTube動画を埋め込むことができるので非常に簡単に埋め込みが出来るのですが、プラグインと違ってサイズを指定することができません。
小さく表示したい時などは。プラグインを使った方が効率的です。

以前はYouTubeの「埋め込む」のコード内のwidthとheightの数値を変えることでサイズを変更することが出来たのですが、現在はテーマなどの相性もありサイズが変更されないこともありますので、今後のワードプレスのバージョンアップなどにより今までの動画が正常に表示されなくなる可能性もあります。
サイズを変更したい方はプラグインを使用してサイズ変更する方がが安全だと思われます。

TinyMCE AdvancedShortcodes Ultimateは、どちらもインストールしておいて損はありません。大変便利なプラグインなので、まだ使ってないという方は是非使ってみてください。