Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 277
content=""/> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 277
content="" /> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 277
content="" />

Web制作 × AI

レスポンシブ対応したYouTube埋め込み

こんにちは、暇さえあればYouTubeばかり観ている管理人です。
いやー、YouTubeの勢いはすごいですね!!
YouTubeが世に登場した時は、まさかここまで世界的な動画投稿サイトになるとは思ってもいませんでした。
ところで、最近は「YouTubeの埋め込み」が実務において一般的になってきました。
大企業では商品のCMやPR動画をYouTubeに投稿することも多く、コーポレートサイト内でも動画紹介ページをよく見かけるようになりました。

また、レスポンシブウェブデザイン対応のページも業界全体に普及しており
「YouTubeの埋め込みを動画をレスポンシブ対応してほしい」という要望も数多く受けるようになりました。

ディレクター目線からすると難しく感じるかもしれませんが、技術的には非常に簡単です。
なぜならWEB業界の先輩方がCSSのみでレスポンシブウェブデザインに対応できる方法を生み出し、数分もあれば対応できる状況になっているからです。下記のようにiframeをdivで囲み、それぞれにスタイルをあてるだけでOKです。

■CSS

.youtube-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

参考にさせていただいたページ
http://www.wivern.com/report20130802.html

この記事を書いた人(著者情報)

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク