iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。 ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するのがReframe.jsです。

Reframe.jsの使い方

Reframe.jsを実行するのは簡単です。以下のコードだけで使えます。

reframe('selector');

デスクトップサイズの場合。

幅を縮めても問題ありません。

Reframe.jsの特徴としては外部のJavaScriptライブラリに非依存ということでしょう。特にブログなどで活躍するのではないでしょうか。またハイブリッドアプリでも使えそうです。

Reframe.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Reframe.js dollarshaveclub/reframe.js: Reframe unresponsive elements responsively.