コロナ禍で少し時間が空いたので、自分のサイトを見直していました。
かなり放置していたので、おかしな広告がたくさん入っていたり、表示が最適化されていないことに気が付きました。
それらを修正したので記事にしています。

スマホ表示の不具合

パソコンでは、画面が大きいため、不具合はわからないのですが、スマホだとサイズを最適化していないとこのようになります。

通常

画面幅を最大限に使ってきれいに表示します。

ここが動画を埋め込んでいる場所

いたって普通です。

最適化されてないと…

右半分が空いているのに画面サイズが小さくなっていますよね。

ここが動画を埋め込んでいる場所

わかりますか？
埋め込みしている動画サイズが大きいため、それに合わされているため、他の領域が狭くなってしまっているのです。
これ、パソコンでは問題なく表示されるのですが、スマホでも最適化させる必要があります。

埋め込みサイズを最適化する方法

スマホに合わすと、パソコンでは小さくなってしまい、パソコンに合わすとスマホでの表示が上手くできませんので、どちらでも最適化できるようにします。
エディターを見ると、このようになっています。

埋め込みコードを抜き出すとこうです。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/4F7NIdJyVJE” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

埋め込み動画サイズはここで書かれているので、width=”560″ height=”315″　ここを下記に入れ替えます。
style=”max-width:100%;”

<iframe style=”max-width:100%;” src=”https://www.youtube.com/embed/4F7NIdJyVJE” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

最適化した覚えがないなら

サイトを作っていて、サイズを最適化していないなら対応することをお勧めします。
これは、動画でも画像でも同じことが出来ますので参考にしてください。
私のサイトもアクセス数がピークの／1/20にまで落ち込んでいます。
こんなことでは改善するとは思えませんが、少しずつ更新していこうと思います。