CSS: Elastic Videos

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

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


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


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

関連エントリ

• フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５
• ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６
• Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ