iFrameやVideoなど非レスポンシブ要素をレスポンシブ対応に変えるJSプラグイン「Reframe.js」

Reframe.js

Reframe.jsは、iFrameやVideoなど非レスポンシブ要素をレスポンシブ対応に変えることができるJavaScriptプラグインです。

YouTubeのような埋め込みコンテンツを完璧な比率、サイズで表示することができます。

スポンサーリンク

デモ

デモページを用意しました。

上がreframe.jsあり、下がreframe.jsなしの状態です。reframe.jsありの方はコンテンツエリアにフィットして表示されています。

reframe.jsのサンプル

使い方

ダウンロード

GitHubページの右側にある「Clone or download」の中にある「Download ZIP」ボタンからダウンロードすることができます。

Reframe.jsのダウンロード

「dist」フォルダに入っているreframe.jsreframe.cssを使います。

HTML

YouTube動画を用意します。

CSS

<head>セクションでreframe.cssを読み込みます。デモ用に.exampleのスタイルを調整します。

JavaScript

</body>閉じタグの前で、reframe.jsを読み込んで、iframe要素を指定して、スクリプトを実行します。

まとめ

ひとつのhtmlにまとめるとこうなります。

以上で、reframe.jsの実装は完了です。

スポンサーリンク
Reframe.js – iFrameやVideoなど非レスポンシブ要素をレスポンシブ対応に変えるJSプラグイン

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.09.23
  • Views 645