Reframe.jsを使ってすべての埋め込みコンテンツをレスポンシブにする

最も難しい部分 動画を埋め込む 幅と高さを正しくしています。これらの数字 縦横比を定義する そして彼らがオフになったとき 素晴らしいビデオプレーヤーを入手.

これは すべての埋め込み要素に当てはまります iframeやソーシャルメディアウィジェットなど。そして、これらは通常レスポンシブデザインではさらにトリッキーになる可能性があります。 反応しない要素.

しかしと Reframe.js, あなたは作ることができます 任意の縦横比に対応する任意の要素.

これはおそらくWeb上で最もシンプルでありながら最も価値のあるJSプラグインの1つです。実は Dollar Shave Clubによって作成されました これは驚くべきことに独自のGitHubページを持っています.

Reframeは 無料プラグインの1つ より簡単な方法が必要な開発者向け レスポンシブ埋め込みコンテンツの処理.

明らかな原因は、YouTubeやVimeoなどのサイトからの埋め込みビデオです。悪名高い これらの要素を反応させるのは難しい CSSハックなし.

Reframe.jsを使えば、 選択する ターゲットにしたい要素は何でも それを見直す を使用して reframe（） 関数.

あなたのWebページにReframe.jsプラグインを追加することから始めましょう。あなたはできる コピーをダウンロードする GitHubから、そしてそれは1KBだけ縮小されている.

じゃあ、あなただけ 関数にセレクタを渡す 再構成したい要素は何でも. ページを読み込む そしてブーム！あなたはすべてのセットであるべきです.

たとえば、あなたのサイトにいくつかのビデオが埋め込まれているとしましょう。あなたはできる クラスを追加する .ビデオ 埋め込む, そしてそれをセレクタとして使います。 Reframe その周りにdivとクラスを自動的に追加します レスポンシブスタイルを作成する.

だからあなたの JavaScriptコード このようになります：

reframe（ '。video'）;

とても簡単?

このコードは、クラスを持つすべての要素を対象としています。 .ビデオ そして 彼らを反応させる. 追加のハックや追加のCSSは不要です。 CSSメソッドを使用しても問題ないことは間違いありませんが、する必要があります。 手動で折り返す 追加クラスを持つすべての埋め込みビデオ.

Reframe just 余分なステップを省きます そしてJavaScriptを使ってそれをすべて実現します。に デモをチェックする そして いくつかの基本的なコードスニペットを探す, Reframe.jsのホームページにアクセスしてください。あなたはできる コードのコピーをダウンロードする GitHubリポジトリから直接.