レスポンシブウェブデザイン-ビデオ
widthプロパティの使用
プロパティが100%に設定されている場合width
、ビデオプレーヤーは応答し、スケールアップおよびスケールダウンします。
例
video {
width: 100%;
height: auto;
}
上記の例では、ビデオプレーヤーを元のサイズより大きく拡大できることに注意してください。多くの場合、より良い解決策は、
max-width
代わりにプロパティを使用することです。
max-widthプロパティの使用
プロパティが100%に設定されている場合max-width
、ビデオプレーヤーは必要に応じて縮小されますが、元のサイズより大きくなるように拡大されることはありません。
例
video {
max-width: 100%;
height: auto;
}
サンプルWebページにビデオを追加する
サンプルWebページにビデオを追加します。ビデオは、常に利用可能なすべてのスペースを占めるようにサイズ変更されます。
例
video {
width: 100%;
height: auto;
}