ひまりこメルマガ配信中!
【2018年5月より年間オンラインサロン開始!】
月収70万&80万突破者も!
ブログで稼ぐオンラインサロンの募集は
メルマガ読者さん限定にお届けしています。

初心者さん向け!ゼロから始めるブログの作り方をプレゼント中!
トレンドブログで稼ぐ

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

サイトに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>

 

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

ひまりこメルマガ

月収10万円〜100万円達成まで!
主婦さんのブログ実績者多数の
サロン情報も発信中です!
※読者さん限定特典あり!

メルマガでは、

  • 【Day1】ブログ最強説!と得られるもの
  • 【Day2】ブログで総額○○00万!どん底の人生からゆとりへの軌跡!
  • 【Day3】女子がハマるインスタの副業勧誘の仕組み&資格は意味ない?
  • 【Day4】人気料理ブロガーさんの収入はいくら?&稼げるブログ記事とは
  • 【Day5】長期的に安定して稼ぎ続けるブログを作るために必要なこと
  • 【Day6】ブログで稼ぐためにポイッと手放した方がいいこととは?
  • 【Day7】他人を信用しないニューヨーカーとブログをやるリスク

など、ブログで稼ぐための思考法や実際のところどうなの?ってことも赤裸々に綴っています♪

さらには、リアルタイムメルマガでは

  • サロンで実際にどんな活動をしているのか
  • 勉強会の様子
  • メンバーさんの成長の様子

などもお伝えしています!

登録はこちらから!
↓↓

RELATED POST