ブログの動画が上手くスマホで表示されない人必見 プラグインで解決できます。

  • 2019年12月18日
  • 2020年8月17日
  • ブログ

今回このブログで紹介するのはワードプレスで作ったブログに「YouTube」の動画を埋め込む方法と、スマホでも埋め込まれた「YouTube」動画をちゃんと見られるようにする方法です。

マル
普通ちゃんと見れるんちゃうん?
マッスー
僕もそう思ってたんですけどね〜。
ブログに「YouTube」をちゃんと埋め込めるようになる!

ワードプレスブログでYouTubeの動画を埋め込んだがスマホで表示サイズが合わない それプラグインで解決できます。

先日ある記事を書いていてこれは文章ではなく動画を使った方が分かりやすいなと思いました。iPhoneの設定や操作ついて書いたものだったので、スクリーンキャプチャを使って撮った動画をiMovie編集してアフレコで後から声を入れ「YouTube」に動画をアップロードしました。
しかし、パソコンで表示した時には全く問題なかったんですが。各デバイスごとにちゃんと表示ができるか確認しましたところ、モバイル環境では動画が右にはみ出してしまいサイトのバランスがおかしな事になってしまいました。Googleが言っているように今はデスクトップよりもモバイル(スマートフォン)から閲覧されていることが多くなており、Googleもモバイルに対応しているサイトを優先して検索上位に上げていく傾向があります。僕のこのサイトも2019年12現在アクセスの約50%がモバイル端末からのものになっています。それではまず最初にワードプレスで作ったブログに「YouTube」の動画の埋め込む方法から説明していきます。

ワードプレスのブログにYouTubeの動画を埋め込む方法

ブログに動画を埋め込む方法は簡単です。使いたい「YouTube」動画を見つけたらその動画のチャンネル登録の上にある共有のマークをクリックします。

「共有」をクリックすることでそのYouTube動画をブログやSNSなどで共有することができます。

クリックすると下のポップアップが出てきます。

「コピー」の部分をクリックすると使いたいYouTube動画のURLをコピーできるので後はブログの中で動画を埋め込みたい部分に貼り付けるだけです。

マル
めっちゃ簡単やん!
マッスー
テーマが対応してないと出来なかったりするんですよー。

使っているテーマがURLを貼り付けるだけでYouTubeの貼り付けが出来ない場合は

マークの部分をクリックします。

これでブログに埋め込めるコードが出てきます。

あとはコピーをクリックして


ブログの動画を埋め込みたい部分にこのコードを貼り付けるだけで簡単にブログにYouTube動画を埋め込み出来ます。

マル
ほんま簡単やったな?
マッスー
あまい!!

YouTubeの動画をブログに埋め込んでパソコンで見てもらうにはここまでの作業で完了です。ではモバイル環境のスマートフォンで、このままブログを見るとどうなるかというと。

スマートフォンで見ると埋め込んだYouTube動画のサイズが合わない

先ほどまでの作業で埋め込み作業自体は終わっているんですが、画像のようにスマートフォンで表示するとサイズが合わないで右にずれてしまいました。

こうなってしまいます。右にはみ出てますよね。


パソコンだと普通に表示されているので、スマートフォンでもちゃんと表示できるようにしたいですよね。この状態を改善するためにかなり調べましたが、テーマの中にコードを書き込み変更を加えないといけなかったり、ハードルが高い内容となっていたのでこの方法は諦めました。

マル
それあかんとちゃうか?
マッスー
いやいや〜他の方法を見つけたからです。

しばらくの間は改善方法が見つからなかったので、意記事自体は公開しておいて放置状態でしたが簡単に何とかならないかとプラグインを探していたんです。かなり時間はかかりましたがやっと便利なプラグイン を見つけたので同じ様にYouTubeを埋め込んだけどスマートフォンでうまく表示できなくて困っている人は使ってみてください。

ワードプレスでYouTube動画サイズをスマホ用にしてくれるプラグイン

使うのはこの「Embed Plus for YouTube」というプラグインです。

プラグインを追加するために「プラグイン」→「新規追加」へ進みます。
新規追加からプラグインの検索画面に進みましょう。

プラグイン新規追加を選んだら「YouTube」と入力して検索します。

インストールをクリックしてプラグインを追加します。

設定はプラグインを有効化した後に出てくる「YouTube Free」からできます。

スマートフォンで表示した時にサイズを調整するためには「Responsive Video Sizing」にチェックを入れます。

下にある2つの選択肢は

「Responsive for all YouTube videos 」
ブログ内YouTube動画の全てサイズをスマートフォンの画面サイズに合わせてくれる。
「Responsive for only videos embedded via this plugin」
このプラグイン経由で埋め込んだYouTube動画のみスマートフォンの画面サイズに合わせてくれる。

といった機能になっています。
僕は動画によって使い分ける必要はないと考えたので、ブログ内のYouTube動画サイズを全て調整してもらえるように設定しました。

設定が終わるとブログ内のYouTube動画が自動的に調整されています。
先ほどのブログの動画サイズもスマートフォン用になってます。

このプラグインがあれば、気軽にYouTubeの動画を埋め込んで魅力的なブログを作ることができますね。

まとめ

いかがだったでしょうか?ブログにYouTubeの動画を埋め込むのは簡単なので何か紹介したかったり、自分で作ったチャンネルの動画を埋め込みたいな〜と思ってやってみたけど。スマートフォンで見た時にサイズがおかしな事になってしまった人は参考にしてみてください。

  1. ワードプレスで作ったブログにYouTubeの動画を埋め込むのは意外と簡単。
  2. ただ埋め込んだだけだとスマートフォンで見た時にサイズが変。
  3. プラグインで簡単に解決できる。

またブログを運営していくなかでうまくいかなかったことや、どうやって解決していったかを紹介していきたいと思います。ブログを始めたばかりの人は参考にしてみてください。

今回の内容は自分でテーマ内部に手を加えることなく、プラグインを使う方法ですが。使用しているテーマやプラグインとの相性などで不具合が出る可能性があります。念のためバックアップをとってから行ってください。
最新情報をチェックしよう!