メディアサイズに基づいてビデオ表示を自動的に調整します

Question

Web ページで背景ビデオを実行する予定で、モバイルとデスクトップ用に異なるビデオ ファイルがあります。私

<ビデオ自動再生ループミュート再生インライン>
  <ソース src="desktop.mp4" type="video/mp4">
  <ソース src="desktop.webm" type="video/webm">
  <img src="fallback.jpg" >
</video>

メディア クエリの解決策を見てきましたが、私が理解している限り、それは仕様外であり、iOS/Safari ではサポートされていません。

Answer 1

メディア クエリを使用すると、その定義に基づいて src またはその他のコンテンツを使用できます。 CSS-Tricks に関するこの記事をご覧ください: https://css-tricks.com/video-source-by-screen-size/ ただし、これはすべてのブラウザで安定した機能ではないようです。

リーリー

記事で述べたように、JavaScript を使用してビューポート サイズに基づいてビデオの src を変更する別の方法もあります。