動画をレスポンシブにする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. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  2. CSS

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

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

  3. Media Queriesの@media
  4. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  5. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  6. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

コメント

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

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

最近の記事

  1. セミの抜けがら
  2. Nikeスポーツバンド(アンスラサイト/ブラック)
  3. COMOLI 和紙コットンリストバンド
  4. スターバックス インドネシア アチェ
  5. ベーコンとほうれん草のキッシュ

アーカイブ

PAGE TOP