ここでは、YouTubeをブログにスマホ対応(レスポンシブ)で埋め込み投稿させる方法について解説します。

初心者でもコピペで簡単に出来ますよ!

スマホ対応が絶対必要なワケ

2015年4月20日以降、Googleはスマホ対応をさせないと表示順位を下げると発表。
*スマホからの検索時に影響します。

スマホが爆発的に普及しているため
ブログやWebメディアを持っている場合、スマホ表示がされるのは当たり前となりました。

 

僕自身、複数のWebコンテンツを運営していますが
メディアによっては、80%以上がスマホからのアクセスとなっています。

 

Googleアドセンスといった広告収入をキャッシュポイントしてる場合
スマホからの方がPCと比べるとクリック率が8:2くらい違います。

 

そんなスマホ化の波にあわせて爆発的に人気があるのが動画コンテンツですよね。

 

YouTubeはブログと連動すると更にアクセスを増やせる

YouTubeをフックとして稼ぐ方も今や珍しくなくなってきました。

YouTubeから直接アクセスる方が圧倒的に多いですが
無数に存在する動画の中からあなたの動画にアクセスしてもらうのは至難の業です。

 

そこで、ブログやSNSと言った各種メディアとの連携を行い
露出を増やすことにより、YouTubeへのアクセスのキッカケを作ることが出来ます。

 

実はこれ、あなたのブログの滞在時間、PV数増加にも影響を及ぼす為SEO的にも効果が見込めるわけです。

 

YouTube自体、Googleのコンテンツの一つですから理に適っているわけです。

 

YouTubeを埋め込むだけではもうだめなワケ

あなたのブログにYouTubeを組み込むこと自体はとても簡単です。

 

コピペでブログにYouTube動画を挿入する方法

 

PC専用のサイトであれば、これで問題ありません。

 

しかし、サイズ固定となっている為に表示させる画面サイズで表示が崩れてしまうんですよね。

 

結果的に、大抵の場合は自分自身で対策をとらないと

スマホ表示させたときに動画サイズが自動調整されずに

こんな風に表示されてしまいます。

youtube01

サイト自体がスマホ対応されていると、動画だけはみ出るという悲劇・・・。

 

スマホからのアクセスを前提としたときの鉄則は片手で簡単操作です。

 

途中で表示バランスが崩れると、ストレスがたまり離脱率が一気に高まってしまいます。

折角アクセスしてもらう訳ですから
サイト内を沢山見てもらいたいですし、YouTube動画もみてもらい
チャンネル登録まで促したいところです。

そこで、今回は【Advanced Responsive Video Embedder】というプラグインを使った対応策を解説します。

 

【Advanced Responsive Video Embedder】で解決!早速インストール!

今回使うプラグインは【Advanced Responsive Video Embedder】というものです。

このプラグインをインストールにするには

【ダッシュボード】【プラグイン】⇒新規追加で表示される画面の検索ボックスで

【Advanced Responsive Video Embedder】と検索すると出てきます。

youtube03

 

尚、プラグインのインストール方法についてはこちらで解説しています。

機能拡張!簡単なプラグインのインストール方法

 

【Advanced Responsive Video Embedder】プラグインが表示されたら、

【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。

これだけで、インストールが完了します。

 

尚、ダウンロードしてインストールをする場合は、下記のアドレスからダウンロードできます。

https://wordpress.org/plugins/advanced-responsive-video-embedder/

youtube02

 

この場合も有効化を忘れずに行って下さい。

利用するための準備はこれで完了です。

 

YouTube動画を記事内に埋め込む方法

インストールが出来たら、早速使ってみましょう。

 

特に難しい設定はいりません。

 

まずは、動画を埋め込みたい記事の編集画面を開きます。

すると、下図の様に、新たなボタンが追加されています。

これが、動画を挿入するときに使うボタンです。

youtube04

 

では、目込みたいYouTubeのページを開きましょう。

ここでは、アドレスバーに表示される動画のURLをコピーして下さい。

youtube05

 

次に、編集モードは【ビジュアル】で動画を組み込みたい記事の編集画面を開き【Embed Video】をクリックします。

すると下図の画面が表示されますので、図に従って組み込みたい動画のURLをペーストして

【Insert Shortcode】をクリックしてください。

youtube08

 

youtube06

 

あとは、保存すればOKです。

 

こんな感じで、スマホでも問題なく表示されるようになります。

youtube07

 

まとめ PCブラウザにも有効なので使った方がいい

先ほどもお話しましたが、

このプラグインを通してYouTube動画を組み込むと表示される画面サイズに自動で調整してくれます。

 

スマホだけでなく、タブレットやパソコンでも表示できる画面の最大値が異なるすべての表示に対応できるので動画を組み込みたい方は、導入をお勧めします。

 

尚、動画を撮り過ぎてiPhone内のデータ整理が必要な際はこちらをどうぞ!

iPhoneの写真や動画を吸い出す超簡単なバックアップ用方法『iFunbox』