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の実装は完了です。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Views 1,005