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動画を用意します。

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

人気の記事

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

コメント

  • Posted on
  • Views 1,039