SuperEmbed.jsでレスポンシブ動画を簡単に埋め込む

現代のウェブは 完全に反応がよい そしてこれを毎日多くのデザイナーが認識しています。しかし、レスポンシブデザインに関しては、厄介な問題が1つあります。 埋め込みコンテンツ.

YouTubeからVimeoまでのすべてのビデオサイトには、 デフォルトの埋め込みコード 一定の大きさに固定されています。これは開発者が他のソリューションを使用する必要があることを意味します レスポンシブ動画を作成する.

しかし、CSSコンテナクラスを使う代わりに、 SuperEmbed.js, 無料のJavaScriptライブラリ レスポンシブビデオを作成する.

このプラグイン 2つの問題を解決 すぐに。すべての埋め込みビデオは メインコンテナを埋めるように引き伸ばす, 十分な柔軟性も ブラウザウィンドウに基づいてサイズを変更する.

最高の部分は、そのSuperEmbed.jsです。 追加のコードは不要, だからあなたはちょうどすることができます ファイルを埋め込む そして 走らせて. このJSライブラリは、残りの部分を 特定のサイトの埋め込み要素をターゲティングする.

すべての動画 特定の縦横比を維持する, だからあなたは気まぐれな寸法を心配する必要はありません。そしてSuperEmbedは バニラJSライブラリ と 依存関係なし jQueryなど.

今、SuperEmbed 15以上のビデオ埋め込みをサポート YouTube、Vimeo、Kickstarter、DailyMotion、Facebook、Vid.me、Archive.org（その他多数）などのサイトから。このリストは まだ成長している, そのため、今後さらに多くのビデオストリーミングサービスが追加される予定です。.

このツールを動かすためには、あなたはただする必要があります。 ライブラリをダウンロードする そして あなたのサイトのヘッダに追加してください そのようです：

あなたがダウンロードすることができます 完全コピー GitHubレポジトリからも サポートされているビデオサイト そして 現在のブラウザのサポート.

ほとんどの場合、SuperEmbed 最近のすべてのブラウザをサポート FireFox 3.5以降、Chrome 4以降、およびInternet Explorer 9以降のバージョンから.

これはすべてのブラウザサポートとどれほどうまくそれを考えると非常に印象的なライブラリです。 箱から出してすぐに動作. JavaScriptに頼っても問題ない場合は、CSSハックよりもはるかに単純なソリューションです。.

発見できる 詳しくは GitHubでそれを見ることができます ライブランニング このフィドルで.