https://github.com/maechabin/jquery.cb-iframesize.js

iframeをレスポンシブ対応させるjQuery Plugin
https://github.com/maechabin/jquery.cb-iframesize.js

Last synced: 1 day ago
JSON representation

iframeをレスポンシブ対応させるjQuery Plugin

Host: GitHub
URL: https://github.com/maechabin/jquery.cb-iframesize.js
Owner: maechabin
Created: 2014-11-18T14:24:41.000Z (over 11 years ago)
Default Branch: master
Last Pushed: 2015-07-27T02:40:12.000Z (almost 11 years ago)
Last Synced: 2025-08-18T15:34:03.551Z (10 months ago)
Language: JavaScript
Homepage: http://mae.chab.in/archives/2527
Size: 2.43 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

#jquery.cbiframesize.js

##＜概要＞

ブラウザに表示させている`iframe要素の高さ`をコンテンツの横幅（画面の横幅）に応じてアスペクト比を維持したまま伸縮させるjQueryプラグイン（リアルタイムリサイジング対応）

##＜実装方法＞

###1.外部ファイルを読み込む

jQueryと当プラグインをページに読み込む

```

```

###2.iframe要素

・高さを変更したいiframe要素に任意のidやclass属性を付与

・タグ内またはCSSでiframeのサイズを指定しておく
```

```

###3.プラグインを実行

jQueryのセレクタで高さを変更したいiframe要素を取得し、当プラグインの.cbIframeSize()メソッドを実行する
```
$(".iframe-class").cbIframeSize();
```

##＜デモ＞

[http://jsrun.it/maechabin/ryzq](http://jsrun.it/maechabin/ryzq)

##＜ライセンス＞

MIT license