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

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

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

デモ
使い方

デモ

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

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

使い方

ダウンロード

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

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

HTML

YouTube動画を用意します。

<div class="example">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6FQsIfE7sZM" frameborder="0" allowfullscreen></iframe>
</div>

CSS

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

<head>
  <link href="css/reframe.css"/ rel="stylesheet">

  <style>
  .example {
    max-width: 700px;
    margin: 0 auto;
    background: #ed6b56;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.4);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  </style>
</head>

JavaScript

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

<body>
  ....
 
  <script src="js/reframe.js"></script>
  <script>
    reframe('iframe');
  </script>
</body>

まとめ

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Reframe.js Demo</title>
  <link href="css/reframe.css"/ rel="stylesheet">
  <style>
  .example {
    max-width: 700px;
    margin: 0 auto;
    background: #ed6b56;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.4);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  </style>
</head>
<body>
  <div class="example">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/6FQsIfE7sZM" frameborder="0" allowfullscreen></iframe>
  </div>
  <script src="js/reframe.js"></script>
  <script>
    reframe('iframe');
  </script>
</body>
</html>

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