ブログカスタマイズ

埋め込み動画を超簡単にレスポンシブ対応(横幅自動最適表示)にする方法

どうもshinyaです!

 

自身のブログなどでYouTubeの動画を埋め込んだ時、
スマホで見たり、2カラムから3カラムに変更した時など
動画が枠よりはみ出したりしますよね。

 

テンプレートを一新した時などにも知らぬうちに
こういったことが起こると思います。

 

今回はYouTubeなどの動画を自分のブログに
埋め込む際に一手間加えることによって
超簡単にレスポンシブにする方法をお伝えします。

 

物凄く簡単なので、今後動画を埋め込む際は
このやり方をぜひ実践してみてください。

 

埋め込み動画を超簡単にレスポンシブ(横幅自動最適表示)のやり方

 

埋め込みたい動画の埋め込みコードをコピーして貼り付けます。

 

すると下記のようになると思うので、

<iframe width=”854” height=”480″ src=”https://www.youtube.com/embed/43XXXXeiTNo” frameborder=”0″ allowfullscreen></iframe>

横幅の数値の箇所(黄色部分)を100%に書き換えます。

 

width=”100%

 

100%

こちらをコピーして”と”の間に貼り付けて見てください。

 

これだけで終わりです。

 

これをすることによってどんな状況であっても
横幅MAXの状態で動画を表示してくれるようになります。

 

縦幅は、一度横幅を100%に設定してみてから
比率を調整してみてください。

 

動画ではなく画像も自動ではみ出ないように
レスポンシブにしたい場合は下記を参考にして
ください。

 

画像も物凄く簡単にできます。
スマホ表示とPC表示の画像の大きさを自動で最適表示させる方法

【当サイト訪問者様へ今なら初心者用アフィリエイト教科書を無料プレゼント中!】

入手される場合は下記をバナーをクリック!※ダウンロード者数5000名突破! コンテンツバナー



owner : shinya
- webマーケティングコンサルタント、メンタルアドバイザー


サラリーマン時代、上司との人間関係に嫌気がさし、転職を繰り返し、誰からも干渉されずに生きていく方法としてインターネットビジネスを選択。

Googleアドセンス広告をキャッシュポイントとしたWEBサイト運営から開始し、月間100万PVレベルのサイトを構築しながらSEOを実践的に学び、そこからは指導者としてブログアクセスアップ(SEO)やWEBマーケティング等を個別コンサルティングやオンラインビジネスコミュニティを通じて指導することをメインに活動。

・2014年11月 副業でアフィリエイト開始
・2015年03月 月収25万円突破時に脱サラ
・2015年04月 情報発信ビジネス開始
・2015年11月 月収200万円達成(プロモーション)
・2016年03月 月収100万円達成(自動化)
・2016年03月 e-book大賞優秀賞受賞
・2016年12月 月収1500万円達成(プロモーション)
・2017年05月 月収200万円達成(自動化)
・2017年09月 月収400万円達成(自動化)
・2017年12月 月収3200万円達成(プロモーション)

過去の営業研修系のトレーニングアシスタントの経験を活かし、コンサルティングに+αの価値として自身が最も得意とする「個の能力を最大限引き出すコンサルティング」で多くのクライアントをパラダイムシフトさせ、実績者を量産。

とにかく誰からも干渉されないライフスタイルにこだわり、一度キリの人生、我慢だらけでは楽しくない!欲しいものは欲しいと素直に言えるような「わがままに生きるスタイル」を強く提唱しながらコンサルティングに励む。

現在はサラリーマン、事業主から主婦まで幅広くコンサルし、PC1台だけで稼がせることに成功。

ドラム好き、歌うの好き、焼肉好き、からのそこそこ出不精。しかし、旅行したい時はしたい時はしたいし、眠たい時は寝る。

「人に迷惑をかけないわがままライフ」を送る毎日。

【当サイト訪問者様へ今なら初心者用アフィリエイト教科書を無料プレゼント中!】

入手される場合は下記をバナーをクリック!※ダウンロード者数5000名突破! コンテンツバナー