今やレスポンシブデザインにするのは当然の選択肢になりました。

YouTubeの動画をウェブサイトに埋め込むこともあると思いますが、動画もレスポンシブで表示させたいですよね。

YouTubeの埋め込み動画を簡単にレスポンシブにしてくれるのが、「SuperEmbed.js」です。

読み込ませておくだけで、動画の幅を画面やウィンドウの大きさに合わせてレスポンシブ化してくれます。

サンプルをご覧ください。

Youtube埋め込み動画を簡単にレンスポンシブにしてくれる「SuperEmbed.js」サンプル

対応している動画は、YouTube, Vimeo, Kickstarter, CollegeHumor, Hulu, Flickr, Vine, VideoPress, DailyMotion, Twitch.tv, Vid.meなど。

jQueryなしで単体で動作します。サイズも1.4 KBだけなのでサイトが重くなることもありません。

設置方法

使い方はいたって簡単。

こちらのサイトからダウンロードして、読み込ませておくだけ。

<header>部分に以下を記述します。パスに注意。

<body>部分の任意のところに動画の埋め込みコードを記述します。
YouTubeの場合はここ。
2016-08-23_1511

Vimeoの場合はここ。

紙飛行機のアイコンを押す。
2016-08-23_1513

埋め込みコードがあります。
2016-08-23_1514

特別になにも設定しなくてもいいのでとても楽です。

動画を使うレシポンシブサイトを作成するときは、「SuperEmbed.js」を読み込ませておくといいですね。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

参考:SuperEmbed.js : Fluid width for Embedded Videos

この記事と関連してると思われる記事:

    None Found