スクリプトを読み込むだけでYouTubeなどの埋め込み動画をレスポンシブ対応してくれる「superembed.js」

スクリプトを読み込むだけでYouTubeなどの埋め込み動画をレスポンシブ対応してくれる「superembed.js」

スクリプトを読み込むだけでYouTubeなどの埋め込み動画をレスポンシブ対応してくれる「superembed.js」

superembed.jsは、読み込むだけでYouTubeやVimeoなどの埋め込み動画をレスポンシブ対応してくれるスクリプトです。特定のクラスでiframeを内包したり、jQueryをロードする必要がない、独立した軽量スクリプトになります。

superembed.jsの使い方

まずは、GitHubからスクリプトをダウンロードし、superembed.min.jsをサーバーにアップロードして、スクリプトを読み込むだけです。<head>~</head>内か</body>の直前に以下を記述します。

<script src="js/superembed.min.js"></script>

ファイルパスは適宜変更してください。superembed.jsを読み込むと、iframeに「superembed-force」というクラスが自動的に付与されます。

レスポンシブ対応したくない埋め込み動画には、「superembed-ignore」というクラスを追加します。

<iframe src="http://www.example.com/video" class="superembed-ignore"></iframe>

あとがき

以前、FitVids.jsというjQueryプラグインやCSSでレスポンシブ対応する方法を紹介しましたが、どちらも動画をdivで内包する必要があったり、jQueryが必要だったりします。

superembed.jsは、スクリプトを読み込むだけなので、実装が楽で良いですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です