iframe、object、embed、videoをレスポンシブ対応にできる軽量のjQueryプラグイン「Flexy」

iframe、object、embed、videoをレスポンシブ対応にできる軽量のjQueryプラグイン「Flexy」

Flexyはiframe、object、embed、videoをレスポンシブ対応にできる軽量のjQueryプラグインです。

まずは、デモページをご覧ください。

シンプルなコードで、レスポンシブ対応にすることができます。

使い方

ダウンロード

GitHubにソースコードが公開されています。

右上のClone or download > Download ZIPからZIPファイルをダウンロードできます。

ダウンロード

ZIPファイルを展開したら、srcフォルダに入っている「flexy.js」を使います。

JS

jQueryとflexy.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/flexy.js"></script>

HTML

iframeでyoutubeのビデオを用意しました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/qdrrnS1Afr8?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

JS実行

あとは、</body>閉じタグの直前などでスクリプトを実行するだけです。

<script>
  $('iframe').flexy();
</script>

まとめ

iframe、object、embed、videoをレスポンシブ対応にできるjQueryプラグイン、Flexyを紹介しました。軽量で、シンプルなコードでレスポンシブ対応にすることができます。

人気の記事

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

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

コメント

  • Posted on
  • Updated on
  • Views 636