方法、手法

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. 方法、手法

    バイクのライトが暗いと感じたら!

    実は、初めに、すごく明るいと評判のあった電球に交換しました。期待に胸を…

  2. 方法、手法

    1日1回、君は何を始める?何かを続けてみる方法

    何かを続けるをモチベーションには頼れないから小さすぎて失敗しようがない…

  3. 方法、手法

    本の紹介「腸がすべて」

    ・トマトソースのスパゲティ・トマトの乗ったピザこれは代表的な例ですが、…

  4. 方法、手法

    メッキ加工は自分でも出来る!

    「え、メッキって自分で出来るの?」はいできますよ。大きな部品は、やめた…

  5. 方法、手法

    しゃっくりを止める方法

    4.飲み物を口に含んだ状態で10秒カウント5.カウント終了後、吸いとっ…

  6. 方法、手法

    ファンヒーターへの給油のイライラはすべて解消できる!

    一昔前から、これに灯油をいれて石油ファンヒーターなどに給油する人がいま…




役に立つ記事

気になる記事

笑える記事

follow us in feedly
  1. 方法、手法

    教科書にはない機構設計ノウハウ コスト編
  2. 方法、手法

    会社や自宅にかかってくる営業電話の撃退方法
  3. 考え方

    『明日から来なくていい』と『解雇』は違う
  4. 考え方

    演算(えんざん)って何? 計算とはなにが違うの?
  5. 方法、手法

    突然獅子舞が家に乱入してきたら
PAGE TOP
%d人のブロガーが「いいね」をつけました。