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. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP