質問: お世話になっております。 今回の質問ですがbackgroundタグについてです。 このようなコードを記述しました。 ``` #sample{ background-image: url(a.jpg); background-size: cover; background-position:center; background-repeat: no-repeat; width: 100vw; height: 100vh; text-align: center; } ``` こうすることで、全体を覆うように拡大・縮小することができます。 そこで、今回は画像ではなく動画でやりたいと思い以下のようなコードを記述しました。 ``` ``` しかし、動画は表示されませんでした。imgは画像なのでもちろん動画は読みません。 やりたいこととしては、レスポンシブに動画をフルスクリーンで表示させたいと考えています。 ここで、backgroud-sizeタグと同じようにできるようなやり方について教えていただきたいです。 希望として、jQueryやJavaScripを使用したプラグインは避けたいと考えています。 よろしくお願いします。
回答: 動画の縦横比が変わらないのであれば、aspect-ratio の media query が使えます。 `@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9)` ぴったり、あるいは、動画よりも画面が横に長くなるときは 1. 幅を100%にして `width: 100%` 2. video の上端を .video-container の上から50%の位置(中央)にして `top: 50%` 3. video の高さの半分だけ上に移動させます `transform: translateY(-50%)` `@media (max-aspect-ratio: 16/9)` 動画よりも画面が縦に長くなるときは 1. 高さを100%にして `height: 100%` 2. video の左端を .video-container の左から50%の位置(中央)にして `left: 50%` 3. video の幅の半分だけ左に移動させます `transform: translateX(-50%)` ``` ``` こちらで動作の確認ができます。 Chrome (Win, Mac), Firefox (Win, Mac), IE11 (Win), Edge (Win) では、大丈夫でした。 モバイルは自動再生できないので静画になっちゃいますが、cover な感じで出ます。 codepen版です。