アフィリエイト

WordPressでYouTube動画を埋め込む方法!スマホサイズに自動調整も

投稿日:

hiro
こんにちは、hiroです。 →hiroのプロフィールはこちら

どうも、山田です。
 
 
今回は、「WordPressでYouTube動画を埋め込む方法!スマホサイズに自動調整も」についてです。
 
 

WordPress記事にyoutube動画を埋め込む方法は3つ

WordPressで書いた記事の中に、参考になるyoutube動画や、自分で撮ってyoutubeにアップロードした動画を埋め込みたい!という方はとても多いかと思います。
 
 
テキストのみの記事よりも、動画が挿入されている方がビジュアル的にも、わかりやすさ的にも読者のためになります。
 
 
今回は、WordPress記事にyoutube動画を埋め込む方法として3つ挙げますが、おすすめのやり方から順に紹介していきます。
 
 

・埋め込みコードを挿入
・直接動画URLを挿入
・プラグインを使う

 
 
それぞれやり方を見ていきますね。
 
 

埋め込みコードを挿入

今回、ここでは、僕がアップロードしたこちらの動画を例にあげます。
 
 
人生は思い通りにはならないけど、思った通りになる
https://www.youtube.com/watch?v=EupxJXCOC8c
 
 
まず、記事の中に埋め込みたいyoutube動画のページにアクセスします。
 
 
動画の下の方にある「共有」をクリックします。
 

 
「埋め込む」のアイコンをクリックします。
 

 
「Embed Video」と書いてあるすぐ下の欄の「iframe~」というコードが埋め込みコードになります。
 

 
今回取得した埋め込みコードは、こんな感じ。

<iframe width="560" height="315" src="https://www.youtube.com/embed/EupxJXCOC8c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

これを後ほど使うので、コピーしておきます。
 
 
ここで、埋め込みコードの下に書いてある開始位置は、動画を再生すると何分何秒から再生するかという開始時間の指定ができます。
 
 
また、埋め込みオプションについては、4つチェック項目がありますが、特に変更せずこのままで問題ありません
 
 
では、先ほどコピーした埋め込みコードをWordPressで書いた記事の中に挿入します。
 
 
WordPressの記事投稿画面のテキストモードにします。
 

 
動画を入れたい箇所にカーソルを合わせます。
 

 
先ほどコピーした埋め込みコードをペーストします。
 

 
これで記事を公開あるいは更新をすると、youtube動画が記事に埋め込まれた状態になります。

記事を確認してみると、確かに動画が埋め込まれているのが確認できますね。


 
この方法がシンプルでかつカスタマイズもしやすいので、おすすめですね。

直接動画URLを挿入

2つ目の方法は、WordPressの記事投稿画面に直接動画URLを挿入するというやり方です。
 
 
記事の中に埋め込みたいyoutube動画のページにアクセスし、URLをコピーします。
 
 
 
次に、WordPressの記事投稿画面のテキストモードにし、URLを挿入したい箇所にペーストして公開・更新をします。
 
 
たったこれだけで動画を埋め込むことができます。
 
 
一番簡単な方法なのですが、閲覧するデバイスの横幅によって、動画の横幅も最大値に合わせて表示されてしまうため、PCなど大きい横幅で閲覧した場合に、画質が落ちてしまう可能性もあります。
 
 
このように、動画の横幅のカスタマイズができないため、横幅いっぱいに表示されて見にくくなる可能性があります。
 
 
なので、この方法よりも、先に紹介した埋め込みコードを挿入する方法をオススメしているわけです。
 
 

プラグインを使う

youtube動画を簡単に埋め込む方法として、プラグインを使うやり方もあります。
 
 
プラグインの新規追加から、「Shortcodes Ultimate」を検索し、インストール、有効化をクリックします。
 


 
すると、WordPressの記事投稿画面に「ショートコードを挿入」というボタンが表示されます。
 

 
動画を挿入した箇所にカーソルを合わせ、「ショートコードを挿入」→「youtube advanced」(高度なYouTube)をクリックします。
 

 
URLの欄に、埋め込みたいyoutube動画のURLを入力します。
 

 
基本的にはこれだけで埋め込みできますが、動画の幅や高さも指定することができます。

その下の「レスポンシブ」で「はい」を選択しておけば、ディスプレイ幅に合わせて自動調整してくれます。
 

 
ここで、レスポンシブに頼らず幅と高さを指定したい場合に関しては、youtube動画の比率である幅:高さ=16:9になるように設定してください。
 
 
「コントロール」に関しては、動画の進行具合を示すバーを表示するかどうかという設定です。
 
 
これも好みですが、読者が見たいところを見れるように、個人的には「2.再生開始時にコントロールを表示」がいいですね。
 
 
その他の設定は、好みに合わせて設定していただいて構いませんので、何も変えずにそのままでも良いでしょう。
 

 
すべて設定を確認したら、「ショートコードを挿入」をクリックすると、カーソルのヵ所にショートコードが挿入されるので、このまま記事を公開・更新すると動画が埋め込まれます。

スマホで動画サイズを自動調整する方法

ここまでで、WordPressの記事に動画を埋め込む方法をご紹介してきました。
 
 
埋め込んだ動画は、読者はPCで見る人もいれば、スマホで見る人もいます。
 
 
見るでデバイスの横幅も様々なので、スマホの画面幅によっては、動画は画面の横幅からはみ出ることもあります。
 
 
これを防ぐために、今回は、スマホで見たときの動画サイズを自動調整する方法をご紹介します。
 
 

埋め込みコードをdivタグで囲む

取得した動画の埋め込みコードを、divタグで囲みます。
 
 
具体的に今回は、クラスに「youtube」を指定し、divタグで囲みます。
 
 
こんな感じですね。
 
 

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EupxJXCOC8c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

 
 
この埋め込みコードを上記でお伝えした通り、動画を挿入したい箇所にカーソルを合わせてペーストします。
 
 

スタイルシートにcssを追記

次に、cssを追記することで、動画サイズをスマホで自動調整するように指定します(レスポンシブ対応)。
 
 
下記のcssをスタイルシートの中にペーストします。
 
 

/*YouTubeレスポンシブサイズ*/
.youtube {
    position: relative;
    max-width: 100%;
    padding-top: 56.25%;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

 
 
スタイルシート(style.css)は、WordPressの編集画面の外観→テーマの編集に進んで右側の欄にあります。
 
 

 
 
埋め込みコードのdivタグ囲みと、スタイルシートのcss追記が完了したら、スマホで動画を視聴してもサイズが自動調整されます。
 
 

スマホで動画を自動再生する方法

スマホで動画を見る際に、自動的に再生させたいというカスタマイズも可能です。
 
 
やり方は簡単で、埋め込みコードの中にある動画URLの後ろに下記のコードを追記することで、動画を自動再生にすることができます。
 
 

?&autoplay=1

 
 
具体的には、今回の動画の例の場合、下記の通り「EupxJXCOC8c」の後に、「?&autoplay=1」を追記します。
 
 

<iframe width="560" height="315" src="https://www.youtube.com/embed/EupxJXCOC8c?&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  
 
これだけで、自動再生に設定することができます。
 
 
動画が自動再生されれば、視聴される可能性も上がり、ブログの滞在時間を延ばすことにもつながりますね。
 
 

WordPress記事に動画を埋め込むことで滞在時間を延ばす

WordPress記事に動画を埋め込んで、ブログと動画を連携することで、大きなメリットがあります。
 
 
それは、ブログの滞在時間を延ばすことができるということです。
 
 
ブログ記事がテキストだけの場合、読者がテキストを読み進めて離脱するまでの時間を長くしようとするには、テキストボリュームを増やしたり、内部リンクを最適化していくしかありません。
 
 
しかし、動画を記事に埋め込むことによって、記事ページを開いたまま動画を閲覧することになるので、結果としてブログに滞在しているということになります。
 
 
この「滞在時間」が実はコンテンツの質を上げることにつながっています。
 
 
滞在時間が長いことは、SEOにも非常に有効だとされていて、滞在時間が短いコンテンツは価値が低いとみなされて、検索順位の上位表示にも影響を及ぼします。
 
 
僕の知り合いのサイトアフィリエイトのプロの人は、記事内に埋め込む動画コンテンツを充実させ、なんと滞在時間が数時間という記事を作っていました。
 
 
当然、この記事は上位表示し続けているとのことです。
 
 
滞在時間が長いということは、それだけ読者に求められているコンテンツということになるので、動画を埋め込むことは読者にとっても、Googleの評価にもプラスに働くといえますね。
 
 
ブログ記事と動画コンテンツを連携させて、関連する動画や記事を適切なタイミングで見られるように内部リンクを貼ることで、ブログの回遊率の向上につながりアクセスアップも期待できるので、どんどん動画を活用したコンテンツを発信して、ブログの影響力をあげていくといいですね。
 
 
参考記事:ブログの回遊率を上げてアクセスアップを狙う方法
 
 





-アフィリエイト

Copyright© hiro's blog , 2019 All Rights Reserved Powered by AFFINGER5.