Youtubeにアップロードした動画をワードプレスに埋め込みたい、面白い動画があったので自分のブログで紹介したい、ブログを書いているとそんな必要性や欲求が出て来るのではないでしょうか。

ブログに埋め込むことでYoutubeで動画運用をされている方はブログからの流入も期待できますね。

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

動画を埋め込む方法はプログラミングの知識がなくても簡単にできるものばかりです。参考にしてみてください。

プラグインを使う

TinyMCE Advancedを使う

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

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

共有先を選択する画面が表示されます。ここで「埋め込む」をクリックしてください。

動画の埋め込みの詳細が表示されます。ここでは動画の再生を開始する位置などを設定したりできます。基本的にはデフォルトのままで問題ありません。

一番上に表示されている埋め込みコードをコピーします。コピーの方法は普通にハイライトしても良いですし、赤枠で囲んだ「コピー」をクリックしても同様にコピーできます。これでYouTube側の作業は終了です。

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

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

コードを埋め込んだら「OK」をクリックしてください。

動画が挿入されました。ビジュアルモードなので動画が挿入されたことがダイレクトに分かります。プレビューで投稿を確認してみます。

しっかりとYouTube動画が挿入されていることが確認できました。
TinyMCE Advancedを使ってYouTube動画を投稿に埋め込む方法は以上です。

Shortcodes Ultimate

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

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

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

機能一覧が表示されます。ここで「YouTube」をクリックします。

詳細画面が表示されます。機能を見ていきましょう。

• URL：YouTubeのURLを入力
• 幅：動画の幅を指定
• 高さ：動画の高さを指定
• レスポンシブ：「はい」を選択すると「幅/高さ」の設定に関係なくユーザーの閲覧するデバイスの画面サイズに合わせて最適化されます。※推奨
• 自動再生：「はい」を選択するとユーザーがページを開いた際に自動で動画が再生されるようになります。
• 別のCSSクラス：別のCSSクラスを使う場合に使用します。

基本的に何も変更しないで問題ありません。自動再生はスマホユーザーのデータ通信量を無意味に減らしてしまい、嫌うユーザーも多いのでオフにしておくのが無難です。

「URL」に先ほど、YouTubeでコピーしたURLを貼り付けます。URLを貼り付けたら「ショートコードを挿入」をクリックしてください。「ライブプレビュー」をクリックするとプレビューを確認することもできます。

ショートコードが挿入されました。TinyMCE Advancedの時とは異なり、YouTubeが直接表示されることはなくコードのみの表示になっています。

投稿のプレビューを確認してみます。

表示結果はTinyMCE Advancedと全く同じです。レスポンシブ設定になっているので画面サイズに合わせて最適化して表示されるのも便利ですね。

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

投稿に直接書く

ここではプラグインを使わずに投稿に直接YouTubeを設定する方法を解説します。一番シンプルな方法で動画を埋め込むことができるのでおすすめです。

注意点もまとめてみましたので参考にしてみてください。

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

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

現在のワードプレスのバージョンでは、YouTubeの動画URLを貼り付けると自動でYouTube動画が表示されるようになっています。

プレビューを表示させて確認してみます。

今まで同様、レスポンシブで同じサイズのYouTubeの埋め込みができました。URLを直接貼り付ける方法は以上です。

注意点

この方法はプラグインを使用せずにただURLを貼り付けるだけでYouTube動画を埋め込むことができるので非常におすすめなのですがサイズを指定することができません。

完全レスポンシブなので、あえて小さく表示したいなどの目的がある方はプラグインを使った方が効率的です。

以前はYouTubeの「埋め込む」のコード内のwidthとheightの数値を変えることでサイズを変更することができましたが、現状ではテーマなどの相性もありサイズが変更されないこともあるようです。

そう考えると今後のワードプレスのバージョンアップがあった場合に今までの動画が正常に表示されなくなるリスクなどがありますので、サイズを変更したい方はプラグインを使用した方が安全と言えるでしょう。

まとめ

ワードプレスにYouTube動画を埋め込む方法を解説しました。どの方法も非常に簡単な作業で投稿に動画を埋め込むことができました。

TinyMCE AdvancedとShortcodes Ultimateは、どちらもインストールしておいて損のない便利なプラグインになっているので、まだ活用していない方は是非使ってみてください。

記事の装飾が沢山できるようになるのでワンランク上のコンテンツに仕上げることができます。今後は、ユーザーがワードプレスを閲覧する際に使用するデバイスがPCからスマホにどんどん以降すると言われています。

この流れにしっかりと対応するためにもYouTube動画のサイズはレスポンシブをおすすめします。

旅ブログで現地の様子を紹介する時や、最近お気に入りの海外アーティストの紹介などYouTube動画を使うことでより分かりやすく魅力を紹介できるようになるテーマも沢山あるので、是非活用してみてくださいね。