CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのmax-widthプロパティでビデオプレーヤーをレスポンシブ対応にする方法

Webページに埋め込んだ動画を、画面幅に合わせて自動的に縮小・拡大させたい場合、CSSのmax-widthプロパティを活用するのが簡単で効果的です。以下のコードを実行すると、ビデオプレーヤーをレスポンシブ対応にすることができます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
      <style>
         video {
            max-width: 100%;
            height: auto;
         }
      </style>
   </head>
   <body>
      <video width = "300" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
      </video>
      <p>効果を確認するには、ブラウザのウィンドウサイズを変更してください。</p>
   </body>
</html>

コードのポイント

このテクニックのポイントは、次の2つのCSSプロパティの組み合わせです。

  • max-width: 100%; … 動画の幅が親要素（コンテナ）の幅を超えないように制限します。これにより、スマートフォンなどの狭い画面でも動画がはみ出すことなく表示されます。
  • height: auto; … 幅が縮小された際に、アスペクト比（縦横比）を維持したまま高さも自動的に調整されます。

また、<meta name="viewport">タグを指定することで、モバイルデバイス上でも正しくレスポンシブ表示が機能します。<source>要素を複数記述している点にも注目してください。ブラウザが対応していない形式の場合、次の候補（ここではOGG形式からMP4形式へ）へ自動的にフォールバックする仕組みになっています。

ブラウザのウィンドウ幅を変更してみると、動画が画面に収まるようにスケールされることが確認できるはずです。

  1. CSSセレクターで要素のスタイルを設定する方法をわかりやすく解説

    CSSセレクターを活用すると、自分の意図に合わせて特定の要素だけをピンポイントでスタイリングできます。HTML DOMの中から要素を選択する方法には、実にさまざまな種類が用意されています。CSSセレクターの基本構文CSSセレクターの基本的な書き方は以下の通りです。セレクター {     /* スタイル宣言 */ }それでは、実際のコード例を見ながら、CSSセレクターによる要素のスタイル設定方法を確認していきましょう。例1：IDセレクターを使ったスタイル指定まずは、#（シャープ）を使ったIDセレクターの例です。特定のIDを持つ要素のみにスタイルが適用されま

  2. Androidスマホで使えるおすすめ動画プレイヤーアプリ23選

    Androidは、アプリ開発者にとって最も扱いやすいOSのひとつです。Google PlayストアはApp Storeほど審査が厳しくなく、何十万という多種多様なアプリが公開されており、ユーザーはスマホでやりたいことほぼすべてに対応するアプリを見つけることができます。長時間の移動中や暇な時間、ちょっとした息抜きが必要なとき、スマホは手軽なエンターテインメントの源になります。特に動画再生アプリがあれば、スマホはいつでもどこでも楽しめる「ポケットシアター」に早変わり。新しい映画やドラマを再生するだけで、退屈な時間を充実したひとときに変えられるのです。Androidスマホには標準の動画プレイヤーが搭