流体幅ビデオ

今日のレスポンシブで流動的なWebレイアウトの時代には、完璧なハーモニーを妨げるメディアの種類があります：ビデオがあります。ウェブサイトにビデオを表示する方法はたくさんあります。ビデオをホストして、html5を使用することができます<video></video>タグ表示; YouTube、Vimeoなどを使用して提供することもできます<iframe></iframe>ビデオプロバイダーを表示するコード。適切なアスペクト比を維持しながら、すべてのビデオを流動的な幅に保つ方法を見てみましょう。

これらのビデオ埋め込みシナリオでは、静的な幅と高さを宣言することが非常に一般的です。

<video ...="" controls="" height="300" width="400"></video>
<iframe ...="" height="300" width="400"></iframe>
<object ...="" height="300" width="400"></object>
<embed ...="" height="300" width="400"></embed>

推測しますか？流体幅環境で静的な幅を宣言することは良い考えではありません。ビデオの親コンテナが宣言された400ピクセルよりも縮小するとどうなりますか？それはオーバーフローし、ばかげて厄介に見えるかもしれません。

だから私たちはこれをすることはできませんか？

<video ...="" width="100%"></video>

はい、できます！標準のHTML5ビデオを使用している場合、これによりビデオがコンテナの幅に適応します。重要なことに、あなたがするときは、高さの宣言を削除して、ビデオが成長して縮小してアスペクト比を維持し、空白のスペースを埋める厄介な「バー」がないようにします（画像とは異なり、実際のビデオは要素のサイズに関係なくアスペクト比を維持します）。

これをCSS経由で行うことができます（HTMLで宣言されていることを心配することなく）：

ビデオ {
  /*応答性のために他のスタイルをオーバーライドします*/
  幅：100％！重要。
  高さ：自動！重要。
}

<iframe></iframe>ビデオ（YouTube、Vimeoなど）

処理が通過したとき<iframe></iframe>上記のヒントは、ビデオを送信するときは役に立ちません。 100％の強制幅は有効ですが、 height: auto ¹⁵⁰ピクセルの静的な高さになります。

幸いなことに、いくつかの可能なソリューションがあります。そのうちの1つは、Thierry Kobletzによって最初に作成され、2009年にリストで公開されました。ビデオの本質的なスケールを作成しました。この手法を使用して、ビデオを固有のアスペクト比で別の要素に包み、その要素内にビデオを絶対に配置します。これにより、依存できる液体幅と妥当な高さを得ることができます。

<div class="videoWrapper">
  <iframe allowfullscreen="" frameborder="0" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" width="560"></iframe>
</div>

.videowrapper {
  位置：相対;
  パディングボトム：56.25％; / * 16：9 */
  高さ：0;
}
.videowrapper iframe {
  位置：絶対;
  上：0;
  左：0;
  幅：100％;
  高さ：100％;
}

たとえば、HTMLからアスペクト比を直接調整できる巧妙な適応方法があります。

<div style="--aspect-ratio: 3 / 4;">
  <iframe ...></iframe>
</div>

.videowrapper {
  ...
  /* 16/9へのフォールバック、それ以外の場合はhtmlの比率を使用します*/
  パディングボトム：calc（var（ -  aspect-ratio、.5625） * 100％）;
}

 .videowrapper iframe、
.videowrapper embed、
.videowrapperオブジェクト{}

しかし...アスペクト比、古いコンテンツ、非技術ユーザーなど。

上記の手法は素晴らしいですが、いくつかの可能な制限があります：

1. ラッパー要素が必要なので、YouTubeから直接コードをコピーして貼り付けて貼り付けても不可能です。ユーザーはより賢くする必要があります。
2. 古いコンテンツがあり、Fluidに再設計している場合、すべての古いビデオにはHTMLの調整が必要です。
3. すべてのビデオには同じアスペクト比が必要です。それ以外の場合、それらは異なるアスペクト比にキャストされ、「バー」が得られます。または、調整するには該当するクラス名ツールボックスが必要になり、追加の複雑さが追加されます。

これらの制限のいずれかがお客様に適用される場合は、JavaScriptソリューションの使用を検討することをお勧めします。

想像してください：ページが読み込まれると、すべてのビデオが表示され、アスペクト比を保存します。すぐに1回実行し、ウィンドウがサイズ変更されるたびに、すべてのビデオがサイズ変更され、利用可能な幅を埋めてアスペクト比を維持します。 jquery javascriptライブラリを使用すると、次のようになります。

 //すべてのYouTubeビデオを見つけます

  //流体の幅の要素$ fluidel = $（ "body"）;

//各ビデオのアスペクト比を計算して保存します$ allvideos.each（function（）{

  $（これ）
    .data（ 'aspectratio'、this.height / this.width）

    //ハードコーディングされた幅/height.Removeattr（ 'Height'）を削除します
    .removeattr（ 'width'）;

}）;

//ウィンドウが変更されている場合、$（window）.resize（function（）{

  var newwidth = $ fluidel.width（）;

  //各ビデオのアスペクト比に従ってすべてのビデオのサイズを調整します$ allvideos.each（function（）{{

    var $ el = $（this）;
    $ el
      .width（newWidth）
      .height（newWidth * $ el.data（ 'aspectratio'））;

  }）;

//ページが読み込まれているときにすべてのビデオを修正するために1回サイズを開始}）。sezize（）;

これは、FitVids.jsの由来です

このすべてのサイズ変更作業を処理することに加えて、FITVIDS.JSはすべてのビデオをループし、アスペクト比が有効になっているHTMLラッパーと必要なCSSを追加します。これは、ハンドラーのサイズ変更窓にバインドする必要があるよりもはるかに効率的です！

代わりに純粋なJavaScriptを使用してください

今日、jQueryはもはやあまり人気がありません。幸いなことに、デイブにはバニラバージョンがあります（自己制作のCSSが必要です）：

1. 実際、それ以外に述べられていない場合、すべてのブラウザは、iframe、キャンバス、埋め込み、およびオブジェクトタグを300ピクセル×150ピクセルとしてレンダリングします。これがUA StyleSheetにない場合でも。

出力は、元の画像とその形式を維持します。テキストは、元の意味を維持しながら、流れと読みやすさの改善のために言い換えられ、再編成されています。

以上が流体幅ビデオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。