動画をレスポンシブにするCSS

CSS

動画をレスポンシブに対応させるCSSのTipsがとても便利

以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVids.JS」をご紹介したんですが、今回はJSを使わずにCSSだけを使って埋め込まれた動画をレスポンシブに対応させるTipsが「Web Designer Wall」にあったのでご紹介します。CSSで完結できるならそれに越したことはないですよね。

[ads_center]

やり方

まずはCSSです。親要素にはposition: relative、子要素にはposition: absoluteでwidthとheightともに100%を指定する必要があります。

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTMLはYouTubeなどから埋め込まれた要素をvideo-containerのクラスを付けた要素で内包します。

<div class="video-container">
    <!-- ここにYouTubeやVimeoの埋め込みコード -->
</div>

CSSだけで埋め込み動画をレスポンシブにすることができるなら、JSなどを読み込まなくていい分、軽量になるので嬉しいですね。とても参考になりました。

参考サイト

関連記事

  1. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  2. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  3. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  4. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  5. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  6. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP