responsive-web-design_englishども!梅田です!!

 

YouTube動画などをサイトにアップした場合、
スマホから見たら横にはみ出てしまってるって事ないですか?

 

最近のサイトはレスポンシブデザインが主流ですが、
埋め込み動画に関してはサポート出来ていないので、
そのまま埋め込むとスマホによってははみ出てしまい、
スマホユーザーからはすこぶる不評になります(^^ゞ

 

そこで今回は埋め込み動画を簡単にレスポンシブにする方法について解説します。

 

目次

YouTube動画をレスポンシブ対応にする方法 解説動画

YouTube動画をレスポンシブ対応にする方法

 

rapture_20150801144922

 

YouTube動画の場合は、埋め込みたい動画から共有→埋め込みコードをクリックし、
動画の埋め込みコードを表示させてください。

 

このコードをサイトやブログに貼り付ける事で動画を埋め込む事が出来ます。

 

ただこの場合はレスポンシブに対応出来ていませんので、
埋め込む時に下記コードを追加します。

 

<div class=”v-wrap al-c m30-b”>動画の埋め込みタグをここに貼り付け</div>

 

埋め込みコードの前後に、太字のタグを入力してください。

 

たったこれだけで動画がレスポンシブになり、
スマホから見た場合でも大きさは最適化されます。

 

スマホ表示の確認は、以前に書いたこちらの記事を参考に、
Chromeから確認してみてください。

 

関連:PCでスマホ表示させる簡単な方法

 

まとめ

 codium-extend-mokup

とても簡単に動画をレスポンシブに出来ますので、
動画を埋め込む時には必ず実践するようにしましょう。

 

スマホユーザーはこれからどんどん多くなってきますので、
ストレスなくサイトを見てもらう為には必須になります。