YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
CSS: Elastic Videos - Web Designer Wall
While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
