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. universal-tilt.js

    JavaScript

    パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

    universal-tilt.jsはパララックスやスケールなど多彩なチ…

  2. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  3. Expanding Bar Navigation Concept
  4. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  5. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  6. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP