WordPressでブログを運営していると、YouTube動画を掲載したいという時があるかと思います。動画貼り付け、動画を使うことで、文章だと理解しにくかった部分も分かりやすく伝えることができるという点もありますが、実は動画を視聴してもらうことで記事の滞在時間を長くし、検索結果の上位表示にもつながる重要なSEO対策になったりします。
著作権などの関係で貼り付けてはダメな動画もありますが、貼り付けても問題ないものは積極的に活用していくこともユーザーファーストの視点でも大切です。
WordPressでは初心者にも簡単にYou Tube動画を貼り付けることができます。が、お使いのテーマなどによっては、スマホでみたときに、画像がはみ出して切れてしまうことも！サイズ指定やレスポンシブ対応にする方法も解説します。
YouTubeの動画のURLを使って動画を挿入する
新規作成から貼り付け
最初にYouTubeの動画のURLを使用して記事に動画を挿入する方法です。WordPressではメディア埋め込みと呼ばれる機能があり、対応しているサービスであればURLを記事の本文に記述するだけで埋め込むことができます。
YouTubeの動画のURLを取得します。YouTubeに移動し、挿入したい動画の再生ページを開いて下さい。アドレスバーに表示された動画のURLをコピーします。
WordPressの投稿画面のビジュアルの、挿入したい場所にペーストします。
- ポイントは、URLの前に他の文字が入らないようにすることです。
きれいに挿入されています。この方法では、サイズは変更できませんが簡単ですね！
YouTubeで埋め込み用のコードを取得して利用する
埋め込み用コードでは、表示する動画のサイズだけでなく再生開始位置も変更できます。細かい設定をしたい場合はこちらの方法をお使いください。
記事に埋め込みたいYoutube動画を開き、共有をクリックします。
- 共有をクリック！
- 「埋め込む」をクリック！
- 表示サイズを変えたい場合は、width="xx"(幅) height="xx"(高さ)を変更します。
- サイズはpx（ピクセル）で指定し、比率は幅:高さが16:9になるようにします。
- 開始○秒後から再生したいという場合には、開始位置にチェックを入れ、時間を記入します。
コピーをクリック！
コピーした記述を、WordPressの投稿画面の「テキスト」に上記のように貼り付けます。
ビジュアルに戻って確認すると動画が挿入されています。
You Tube動画をレスポンシブで公開する方法
そもそも、お使いのWordPressテーマによって、レスポンシブ対応のものと非対応のものがあります。レスポンシブ対応のテーマを使っている場合には、ここから先の対応は必要ありません。
YouTubeの埋め込みコードを使ってWordPressに動画を挿入した場合、iPhoneなどのモバイル環境で記事を閲覧してみると動画のサイズが縮小されずに幅が切れて表示されることがあります。この場合は以下の対応をします。
- 「埋め込みコード」をタグで囲む
- CSSの設定
と2つのステップが必要ですが難しいものではありません。
「埋め込みコード」をタグで囲む
挿入した動画をレスポンシブに対応させ、適切なサイズに自動的に調整するように変更してみます。まず最初に記事に挿入したYouTubeの埋め込みコードをdiv要素で囲って下さい。div要素には任意のクラス名を指定しておきます。今回はクラス名は「youtube」としました。
<div class="youtube">
～ ここに埋め込みコードを入れる ～
</div>
ここまでで、いったん記事を更新（下書き保存）しておいて下さい。
CSSの設定
以下をCSSに追加します。（コピペでOK！）
スタイルを設定します。WordPressで独自のスタイルシートを記述する方法はいくつかありますが、今回は「追加CSS」を使用してみます。画面左側の「外観」メニューの中にある「CSSの編集」をクリックして下さい。
- 追加のCSSをクリック！
今回追加するスタイルは次の通りです。スタイルの入力が終わりましたら「公開」をクリックして下さい。（コピペでOK！）
追加CSSに記載
対応した結果の表示確認
改めてiPhoneなどから投稿された記事を閲覧してみて下さい。記事に挿入された動画が画面の大きさに合わせて適切なサイズに縮小されて表示されています。
まとめ
WordPressの記事内にYouTobe動画を貼り付けるのは簡単。貼り付け方は2種類あり、
- URLをそのまま貼り付ける
- 「テキスト」モードで「埋め込みコード」を貼り付ける
- 埋め込みコードを利用した方法では、動画のサイズの変更や開始時間の設定ができる
動画再生の自動リサイズ（レスポンシブ）に対応していないテーマもあるので、一度運営するブログについてどうなっている確認してみることが必要です。
レスポンシブになっていない場合、
- 「埋め込みコード」をタグで囲む
- CSSの設定
この２つのステップでレスポンシブに対応させることができます。
私のサイトもそうですが、トレンド系の記事のアクセスを見てみれば、今や7割から8割はスマホで読まれるというのが現状です。
記事を書くことばかりに気を取られがちですが、実際に自分が運営しているサイトやブログ記事がモバイルユーザーにどう見えているのかは都度都度確認していくことが大切です。
こういったことができるようになると、更に幅が広がります。
また、更にネットで収益化していきたい、他の人とは一味違うブログ運営がしてみたい、という場合には以下のメルマガにも登録してみてください。
