SuperEmbed.js

JavaScript

さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブに対応させて表示できるスクリプトです。YouTube、Vimeo、Vine、Kickstarter、Hulu、Flickr、VideoPress、DailyMotionなど数多くの埋め込み動画に対応しています。webページ内にレスポンシブな動画を表示させたい方は必見です。

アスペクト比を維持

デモ

ブラウザのサイズを変更するとわかりますが、縮小・拡大しても動画が最適なサイズに調整されます。オリジナルのアスペクト比もしっかり維持してくれるので、webサイトのレイアウトやデザインにこだわりたい方にはうれしいポイントになるのではないでしょうか?

また、ファイルサイズも非常に軽量で、minバージョンで約1.6KBしかありません。jQueryに依存することもなく、シンプルに実装できるあたりがいいですね。対応ブラウザは、Chrome 4.0+、Internet Explorer 9.0+、Firefox 3.5+、Safari 3.2+、Opera 10+です。

webページに動画を取り入れることで、テキストや画像だけでは伝わらないものでも簡単に伝えられますし、ユーザーの滞在時間も長くなることが期待できますね。

もちろん、動画をたくさん使うことでページの表示速度も重くなってしまいがちですが、SuperEmbed.jsはとても軽量なので、わりと気軽に活用できるのでは?と思っています。

というわけで、いろんな種類の埋め込み動画をレスポンシブ表示してくれる「SuperEmbed.js」のご紹介でした。

SuperEmbed.js

関連記事

  1. no-image
  2. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  3. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  4. stickyNavbar.js
  5. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP