方法、手法

YouTube動画の埋め込みサイズを最適化する方法

YouTube

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

スマホ表示の不具合

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

通常

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

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

いたって普通です。

最適化されてないと…

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

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

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

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

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

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

<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にまで落ち込んでいます。
こんなことでは改善するとは思えませんが、少しずつ更新していこうと思います。


follow us in feedly

ブログ記事を応援してくれる方はポチッっと下のボタンを押してね

そして、この記事をツイッター投稿してくれるなら下のボタンを押してね

いろんなモノの原価前のページ

努力だけでは成果がだせない理由次のページ

関連記事

  1. 方法、手法

    口内炎は10秒で治す!

    口内炎はどうなったのか?幹部は赤くなり、軽く火傷をした状態になりました…

  2. 方法、手法

    エアコンに頼らず、家を涼しくする方法 汗編

    私たちの生活では、クーラーがあるのが、あたりまえになっています。クーラ…

  3. 方法、手法

    日程調整がめっちゃ楽になる方法

    打ち合わせを開催したり、歓送迎会を企画したりする時にはまず、出来るだけ…

  4. 方法、手法

    LINEを使えば固定電話に無料通話ができる

    1日5回まで利用可能固定電話への通話:3分/回携帯電話への通話:1分/…

  5. 方法、手法

    Windows10でブルーライトを100%カットする方法

    Windows10となりますが、強制的に100%ブルーライトをカットす…

  6. 方法、手法

    パソコンにWindowsムービーメーカーがないときの対処法

    2017年の初めに、Windowsムービーメーカーのサポートが終了しま…




役に立つ記事

気になる記事

笑える記事

follow us in feedly
  1. 方法、手法

    少しのコツだけで、Excelで作る表をプロの仕上がりに
  2. 考え方

    「この買い物は得した!」あなたの脳は錯覚している!
  3. 方法、手法

    洗濯槽のカビ洗浄に一番良い方法にたどり着きました。
  4. 考え方

    ガス給湯器のエコジョーズはお得なのか?
  5. 考え方

    ペットショップで売られている動物たちの母親とは
PAGE TOP
%d人のブロガーが「いいね」をつけました。