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を紹介しました。軽量で、シンプルなコードでレスポンシブ対応にすることができます。

関連記事

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • Posted on
  • Updated on
  • Views 845