youtube動画の埋め込み(iframe)がスマホでも切れないようにする方法

9935521594_d975defc80_k

photo by Esther Vargas

ブログにYouTubeの動画を埋め込む人は多いと思いますが、頭が痛いのがスマートフォンで見たときに動画の見え方。

レスポンシブルデザインのサイトに、YouTubeから取得した動画の埋め込みコードをそのまま設置すると、動画が画面からはみ出し、切れて表示されてしまうことがあります。

そこで今回のテーマは、YouTubeの埋め込み動画の幅を調整して、スマートフォンでも切れて見えないようにする方法について。

お困りの方は続きをどうぞ。

YouTubeの埋め込みをウインドウ幅に合わせて自動調整する

まずはYouTubeへアクセスし、通常の方法で埋め込みコードを取得します。

PSY - GANGNAM STYLE  강남스타일  M V - YouTube

取得できたらここで一手間加えます。

YouTubeのコードの中に、「style=”max-width:100%;”」を記述してください。

「max-width:100%」を使うことで、「ウィンドウの横幅が狭ければ、自動的に縮小し表示する」「ウィンドウの横幅が十分あれば原寸のまま表示する」といった指定をすることができます。

作業はこれで完了。とても簡単です。

もちろん、スタイルシートにクラス名をつけて指定してもOK。頻繁にYouTube動画の埋め込みを行う人はスタイルシートで定義しておいた方が楽で使いやすいと思います。

また、余談になりますが、YouTubeから取得した埋め込み動画の大きさは拡大・縮小することができます。その場合は下の「width=”560″」「height=”315″」の部分をいじってあげれば良いだけ。

「width=”560″」が動画の横の大きさ、「height=”315″」が動画の縦の大きさになっています。

縦横比を均等倍率で変更する必要がありますので、下記のサイトを使って比率を合わせると便利です。

おわりに

この方法を使えばYouTube動画の埋め込みをスマホでも切れずに表示させることができ、また縦横比を維持しながら、動画(iframe)の大きさを調節することができます。

もしこれでお困りの方がいたらぜひ試してみてください。

関連記事