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

Changing Background Color while scrollingスクロールで背景カラーを変化させる「Changing Background Color while scrolling」前のページ

流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」次のページGranim.js

関連記事

  1. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  2. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  3. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  4. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  5. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  6. jQuery.GI.TheWall.js

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP