回答編集履歴
3
CSSの説明を追加しました
answer
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
aspect-ratioのmedia queryが使えます。
|
|
1
|
+
動画の縦横比が変わらないのであれば、aspect-ratio の media query が使えます。
|
|
2
2
|
|
|
3
|
+
`@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9)`
|
|
4
|
+
ぴったり、あるいは、動画よりも画面が横に長くなるときは
|
|
5
|
+
|
|
6
|
+
1. 幅を100%にして `width: 100%`
|
|
7
|
+
2. video の上端を .video-container の上から50%の位置（中央）にして `top: 50%`
|
|
8
|
+
3. video の高さの半分だけ上に移動させます `transform: translateY(-50%)`
|
|
9
|
+
|
|
10
|
+
`@media (max-aspect-ratio: 16/9)`
|
|
11
|
+
動画よりも画面が縦に長くなるときは
|
|
12
|
+
|
|
13
|
+
1. 高さを100%にして `height: 100%`
|
|
14
|
+
2. video の左端を .video-container の左から50%の位置（中央）にして `left: 50%`
|
|
15
|
+
3. video の幅の半分だけ左に移動させます `transform: translateX(-50%)`
|
|
16
|
+
|
|
3
17
|
```html
|
|
4
18
|
<style>
|
|
5
19
|
.video-container {
|
|
@@ -34,7 +48,10 @@
|
|
|
34
48
|
</div>
|
|
35
49
|
```
|
|
36
50
|
|
|
51
|
+
こちらで動作の確認ができます。
|
|
37
|
-
|
|
52
|
+
Chrome (Win, Mac), Firefox (Win, Mac), IE11 (Win), Edge (Win) では、大丈夫でした。
|
|
53
|
+
モバイルは自動再生できないので静画になっちゃいますが、cover な感じで出ます。
|
|
38
54
|
[https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html](https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html)
|
|
55
|
+
|
|
39
56
|
codepen版です。
|
|
40
57
|
[https://codepen.io/hoo-chan/pen/eMdVMv](https://codepen.io/hoo-chan/pen/eMdVMv)
|
2
ブラウザ検証結果を追記しました
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
aspect-ratioのmedia queryが使えます。
|
|
1
|
+
aspect-ratioのmedia queryが使えます。
|
|
2
2
|
|
|
3
3
|
```html
|
|
4
4
|
<style>
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
</div>
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
+
こちらで動作確認できます。Chrome (Win, Mac), Firefox (Win, Mac), IE11 (Win), Edge (Win) では、大丈夫でした。モバイルは自動再生できないので静画になっちゃいますが、cover な感じで出ます。
|
|
38
|
+
[https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html](https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html)
|
|
37
|
-
|
|
39
|
+
codepen版です。
|
|
38
|
-
[https://codepen.io/hoo-chan/pen/eMdVMv](https://codepen.io/hoo-chan/pen/eMdVMv)
|
|
40
|
+
[https://codepen.io/hoo-chan/pen/eMdVMv](https://codepen.io/hoo-chan/pen/eMdVMv)
|
|
39
|
-
codepenだと余計な枠がつくので、枠なし版です。
|
|
40
|
-
[https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html](https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html)
|
1
codepenじゃない版を追加しました
answer
CHANGED
|
@@ -35,4 +35,6 @@
|
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
こちらで動作確認できます。
|
|
38
|
-
[https://codepen.io/hoo-chan/
|
|
38
|
+
[https://codepen.io/hoo-chan/pen/eMdVMv](https://codepen.io/hoo-chan/pen/eMdVMv)
|
|
39
|
+
codepenだと余計な枠がつくので、枠なし版です。
|
|
40
|
+
[https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html](https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html)
|