動画をレスポンシブにする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などを読み込まなくていい分、軽量になるので嬉しいですね。とても参考になりました。

参考サイト

Sticky Notes付箋にメモを書いて画面内に複数追加できるChrome拡張機能「Sticky Notes」前のページ

Photoshopの逆光フィルターを使って画像に太陽を加える方法次のページPhotoshopで太陽を追加するやり方

関連記事

  1. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  2. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  3. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  4. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  5. Media Queriesの@media
  6. CSS

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

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

コメント

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

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

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP