前の記事 ≪:2011年5月31日 管理人のブックマーク
次の記事 ≫:スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームで...

これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例

2011年06月01日-はてなブックマーク

スポンサード リンク
CSS: Elastic Videos

これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。
ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。
解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。

通常サイズ。ブロックいっぱいに広がる動画


幅をiPhoneなみに小さくしてみた例。動画も縮んでます。


IEでも動くみたいです。
これは覚えておいたほうがよさそうです。

関連エントリ
関連の記事検索:CSS, Youtube, Web制作, 動画, Webデザイン, jQuery
スポンサード リンク

By.KJ : 2011年06月01日 09:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)