ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2