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. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  2. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  3. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  4. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  5. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  6. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP