WordpressにYoutubeを埋め込む方法

WordpressでYoutube動画を埋め込む方法を紹介しています。

エディタの違いはあるかも知れませんが、iframeタグソースの埋め込みかURL自体の貼り付けで表示させる事ができます。

iframeであれば、再生開始時間や再生リスト、最新動画など細かい設定が可能になります。

本記事ではWordpressサイトにYoutube動画を埋め込む方法についてまとめています。

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

まずは、Youtubeから動画を表示するコードを取得してきましょう。

Youtubeの埋め込みコードをコピー

Youtubeで埋め込みたい動画を表示させ、画面下の「共有」ボタンを押しましょう。

共有パネル内左側にある「埋め込む」アイコンを押すと、埋込コードが表示されます。

コードは<iframe></iframe>のタグコードになっています。これをコピーしてきましょう。

このコードをそのままWordpressの投稿ページや固定ページに貼り付ければ、簡単に動画が表示されるという訳です。

URLコピーからでも埋め込みできる

埋込コード以外にも、Youtubeのアドレスバー欄に表示されているURLでも埋め込みに使えます。

※共有ボタンを押した時に表示される「短縮URLでも」OKです。

WordpressならこのURLを投稿画面に直接貼るだけで、自動でYoutubeが埋め込みされるので便利ですね。

両者の違い

この様に埋め込みコードでなくURLを直接貼る形でも、Wordpressサイトなら動画は表示できます。

両者の違いは、iframeコードなら再生・終了位置の調整や、関連動画の表示ON・OFFなど細かい設定ができる点です。

URLを貼るだけだと、細かい設定はできません。

ブロックエディタからYoutubeを埋め込む

ではまず新しいWordpressの編集画面、「ブロックエディタ」でYoutubeを埋め込む方法を紹介します。

まずは先ほど紹介した手順で、動画の埋め込みコードを取得してきましょう。

カスタムHTMLを使って埋め込みコードを設置する

まずはコードブロック（カスタムHTML）を挿入して埋め込む方法です。

iframeの埋め込みソースを使います。

プラスマークを押して、メニューから「コード」を選択します。

かなり下の方にカスタムHTMLがありますので、直接選んでもOKです。

カスタムHTMLの選択

上部メニューの＜＞アイコンを押して「カスタムHTML」を選びましょう。

コードの貼り付け

カスタムHTMLを選んだら、フィールド内に先ほどの埋め込みコードを貼り付けます。

プレビューで確認

埋め込んだ状態をプレビューで確認できます。

プレビューから「新しいタブでプレビュー」を選択すると、別ページで埋め込んだ様子が確認できます。

Youtube専用ブロックを使う

Youtubeの専用ブロックがありますので、これを使って埋め込む事もできます。

この場合iframeではなく動画URLを使います。

下の方にある「Youtube」を探してクリックしましょう。

動画のURLを貼り付ける

表示されたフィールドに動画のURLを貼り付けて「埋め込み」を押します。

その場にYoutube動画が埋め込まれます。

ショートコードを使って埋め込む

もう一つはショートコードとして埋め込む方法です。

ショートコードでは、[embed]を使用して動画を表示させます。

サイズを指定してURLを間に挟む事で、Youtubeを埋め込みする事ができます（縦横比率に注意）。

ショートコードの書き方

プラスマークからショートコードを選択して挿入します。

中に先ほどの形式で、embedのコードを貼り付けます。

これで指定されたサイズのYoutube動画が表示されます。

クラシックエディタからYoutubeを埋め込む

次に、ブロックエディタの前に使われていた従来の編集画面、クラシックエディタで埋め込む方法を紹介します。

URLもしくは埋込コードを、固定ページか投稿ページの本文欄に貼り付けます。

クラシックエディタの場合、ビジュアル・テキストどちらのタブに貼っても大丈夫です。

ビジュアルタブに貼れば、管理画面上で埋め込み状態が確認できます。

埋め込んだiframeをレスポンシブ対応にする

Youtubeの埋め込みコードで生成されたiframe要素には、pxでサイズ指定がしてあります。

PCサイトならほぼ問題は無いと思いますが、スマホ版では幅などが調整されません。

横スクロールが出たり、動画サイズが軸になるがめに周りのフォントが縮小される場合があります。

そんな時は、CSSでひと手間加えるだけで簡単にレスポンシブ対応させる事ができます。

iframeタグをclass名を付けたdivで囲う

Wordress上に埋込コードを貼ったあと、その周りをdivで囲うようにしましょう。

そのdivにclass名を付けます（ここでは、youtube_embedとしています）。

そのclass名に対し、下記の様にCSSを追記します。

CSS

.youtube_embed { height: 0; margin-bottom: 1rem; overflow: hidden; padding-bottom: 67.5%; padding-top: 1.5625rem; position: relative; }

この様に設定をする事で、常にデバイスの幅に収まる様になり、上下の余白も適切に発生するようになります。

ぜひお試しくださいね。

Youtube動画埋め込みオプション

任意の位置から再生・停止をする

動画を最初からでなく、ある程度進んだ任意の時間から再生させる事ができます。

Youtube側のコードのコピー前に設定

これは、Youtubeの表示された埋込コードの下にある「開始位置」の時間を指定する事で調整できます。

時間を入力する事で、表示されているコードのstart=の数字が変わります。

この状態でコピーしてきましょう。再生時間が2分後に指定された状態で埋め込みできる様になります。

再生リスト

Youtubeには複数の動画をまとめた「再生リスト」機能がありますよね。

この再生リスト自体をWordpressサイトに埋め込むこともできます。

通常の動画と同様にURLや埋め込みコードがあります

いずれも従来の埋め込みと同じ操作です。

埋め込みすると、再生リストの1番最初の動画が表示される事になります。

その動画が終了すると、2番目のリスト動画が自動再生されるという訳です。

関連動画を非表示にする

Wordpressに埋め込む場合はその動画だけを見せたい訳で、後に出てくる「関連動画」は正直必要ないと思います。

そんな時はこの関連動画表示をOFFにできます。

Youtubeの埋め込みコードをまずはコピーして貼り付けるところまで進みます。

loop=1&playlist=の追記

ここでコード内をよく見て、以下のところを探して下さい。

この後ろに続けて、「?loop=1&playlist=-固有id-」と追記します。

-固有id-はその動画固有の識別idですので、embedの後ろについているものと同じものを入れる様にしましょう。

変更前 src="https://www.youtube.com/embed/9I_DKXWdmRU"… 変更後 src="https://www.youtube.com/embed/9I_DKXWdmRU?loop=1&playlist=9I_DKXWdmRU"

これを埋め込む事で、関連動画を出さずにループさせる事ができます。

Youtubeチャンネルの最新動画を自動で表示させる

自分のYoutubeチャンネルや関連動画チャンネルなどは、常に最新動画を表示させたい事もあるでしょう。

これまで紹介した動画はその動画（再生リスト）1つを固定して埋め込む方法でした。

新しい動画が出てきた時はそれを改めて埋め込む必要がありますね。

そこでチャンネル内に新しい動画が登場した際、それを自動で表示させる方法についてご紹介します。

チャンネルIDの取得

サイト上で常に最新の動画を表示する為には、表示させたいチャンネルの「チャンネルID」を取得する必要があります。

自分のYoutubeチャンネルの「設定」から「詳細設定」メニューを開きます。

上記の様な画面で、ユーザーIDやチャンネルIDが表示されているのがわかると思います。

チャンネルIDのUCをUUに書き換える

チャンネルIDは「UC」から文字列が始まる様になっています。

例えば上記チャンネルのIDは以下です。

この冒頭の「UC」を「UU」に書き変えます。

埋め込みコードのURLを上記に変更

埋め込みコードのsrc部分を「https://www.youtube.com/embed/?list=」とし、この末尾に先ほどUUに書き変えたチャンネルIDを追加します。

埋め込みコードに先ほど作ったURLを入れると、以下の様になります。

<iframe title="YouTube video player" src="https://www.youtube.com/embed/UUeSpIQme0f852pky9rEmYGg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

これを埋め込む事で、そのチャンネルの最新動画が投稿されると、自動的にWordpressサイトに表示されるようになります。

一押し人気コーナー紹介