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は、スクリプトを読み込むだけなので、実装が楽で良いですね。