タグ

cssと可変に関するNEPPIEのブックマーク (1)

  • 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

    YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
  • 1