【スマホ最適化】YouTube動画を簡単にレスポンシブ対応させる方法!

ytbRe

サイトにYouTube動画を設置するとSEO的にもいい、というメリットもあるのでオススメです。YouTube動画もスマホ向けにレスポンシブ対応させる必要があるのでその方法をご紹介します。

YouTube動画をサイトに設置するメリット

YouTube動画をサイト内に設置すると、滞在時間を伸ばせるという嬉しい効果があります。

動画を再生する=滞在時間アップ!

滞在時間は長ければ長いほど、検索エンジンに役立つサイトだと評価されるのでSEO的に効果があります。もちろん、全く関係のない動画ではNG、というか、読者さんにスルーされてしまうので、記事の流れにそった動画を紹介していきましょう。

YouTube動画もスマホ最適化する必要がある

YouTube動画を設置するとき、普通にデフォルトの埋め込みコードをそのままペタっと貼り付けるだけですと、横幅が560、高さ315と、PC用の設定になっています。

youRes

 

 

スマホで見ると、動画だけはみ出してしまい、全体的の表示がおかしくなってしまいます。

幅を変更するだけで簡単レスポンシブ!

CSSコードを追加したりといろいろやり方はあるようですが、手っ取り早く変更する方法をご紹介します。

幅(width)を、560から100%に変更するだけです。

<iframe width=”560” height=”315″ src=”https://www.youtube.com/embed/○○○” frameborder=”0″ allowfullscreen></iframe>

<iframe width=”100%” height=”315″ src=”https://www.youtube.com/embed/○○○” frameborder=”0″ allowfullscreen></iframe>

 

変更したら確認してみてください。スマホから見ても、動画だけはみでることはなく、上手くレスポンシブ対応となります。

ブログランキングに参加中です★よかったらぽちっとお願いいたしますm(_)m
↓ ↓ ↓
ブログランキング・にほんブログ村へ
にほんブログ村

mailmagatouroku

コメントを残す

ブログ収入のやり方をメルマガにてプレゼント中!登録はこちらをクリック!