【図解】ブログに埋め込んだYouTubeが再生されない原因と対策

こんにちは、不燃ごみ(@hunenkanengomi)です。

先日、記事内にYouTubeを埋め込んだのですが、pcでは再生できるのにiPhoneやiPadなどのモバイルでは再生できない事態に陥りました。

悪戦苦闘しましたがなんとか解決しましたので、その内容についてお話したいと思います。

急に見れなくなるYouTube

先日、いつもどうり記事をアップしてiPhoneで確認しました。

するとどうでしょう。

私のお気に入りアニメのopが見れないじゃありませんか。

パソコンでは問題なく見れるのですが、モバイル機器だとどうもダメみたいです。

ググってもまともな記事には出会えず、かろうじで対策になりそうな記事があるもうまくいかず。。

よく出てくるのが、YouTubeの埋め込みをする際に【プライバシー強化モードを有効にする】にチェックを入れると見れるようになるとか。

試してみましたが、結果は変わらず。

ただ、これまでに2～3度YouTubeの埋め込みをしたことがありますが、そのときは問題なくいけたんですよね。

そのときと今で何が違うのか考えた際に一つ思い当たる節がありました。

分かった原因

結論から言うと、原因はその日にいれたプラグイン【EWWW Image Optimizer】でした。

【EWWW Image Optimizer】 とは画像を最適化して、サイズを小さくしてくれるものですね。

使うことでサイトが軽くなるのですが、使用している人も多いのではないでしょうか。

さらに細かく言うと、そこの【遅延読み込み】にチェックしてあるとYouTubeが見れなくなってしまうんです。

こちらにチェックを入れている人は1度外して、該当記事を更新してみてください。

一つ一つチェックを外したり入れたりしながら検証を繰り返したので、恐らく合っていると思います。

実際にチェックを外して更新すると。。。

おっしゃああああああああ！！！

やっと見れるようになりました。

やっておく設定

しかしながら、【遅延読み込み】を利用したい人もいますよね。

私も記事に画像が多いので可能であれば使用したく、なんとかならないか色々見ていると。

先ほどの【遅延読み込み】の横にはてなマークがあるので押してみます。

すると英語の説明サイトが出てくるので、グーグルさんの力を借りて翻訳してもらいましょう。

そうしますと、こんな記載があるではありませんか。

レイジーローダーとは【遅延読み込み】のことですね。

これを使うとビデオで問題が起きると明記されていました。

そして、「iframe」を除外すれば無効にできるとも書いてあります。

早速【EWWW Image Optimizer】の設定を開きます。

【遅延読み込み】にチェックを入れ、除外のところに 「iframe」 と打ち込み保存。

記事を見てみると。。。

やりました！！

まとめ

いかがでしたでしょうか。

本日は、ブログに埋め込んだYouTubeがスマホで再生されないことについてお話しました。

今の時代グーグルで調べたらなんでも出てくるので、逆に出てこなかったら焦りますよね。

この記事が同じように困っている方のお役に立てば幸いです。

ではまた次の記事で会いましょう。

レッツFIRE転生！！