回答編集履歴
3
CSSの説明を追加しました
test
CHANGED
|
@@ -1,4 +1,32 @@
|
|
|
1
|
-
aspect-ratioのmedia queryが使えます。
|
|
1
|
+
動画の縦横比が変わらないのであれば、aspect-ratio の media query が使えます。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
`@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9)`
|
|
6
|
+
|
|
7
|
+
ぴったり、あるいは、動画よりも画面が横に長くなるときは
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
1. 幅を100%にして `width: 100%`
|
|
12
|
+
|
|
13
|
+
2. video の上端を .video-container の上から50%の位置（中央）にして `top: 50%`
|
|
14
|
+
|
|
15
|
+
3. video の高さの半分だけ上に移動させます `transform: translateY(-50%)`
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
`@media (max-aspect-ratio: 16/9)`
|
|
20
|
+
|
|
21
|
+
動画よりも画面が縦に長くなるときは
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
1. 高さを100%にして `height: 100%`
|
|
26
|
+
|
|
27
|
+
2. video の左端を .video-container の左から50%の位置（中央）にして `left: 50%`
|
|
28
|
+
|
|
29
|
+
3. video の幅の半分だけ左に移動させます `transform: translateX(-50%)`
|
|
2
30
|
|
|
3
31
|
|
|
4
32
|
|
|
@@ -70,9 +98,15 @@
|
|
|
70
98
|
|
|
71
99
|
|
|
72
100
|
|
|
101
|
+
こちらで動作の確認ができます。
|
|
102
|
+
|
|
73
|
-
|
|
103
|
+
Chrome (Win, Mac), Firefox (Win, Mac), IE11 (Win), Edge (Win) では、大丈夫でした。
|
|
104
|
+
|
|
105
|
+
モバイルは自動再生できないので静画になっちゃいますが、cover な感じで出ます。
|
|
74
106
|
|
|
75
107
|
[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)
|
|
108
|
+
|
|
109
|
+
|
|
76
110
|
|
|
77
111
|
codepen版です。
|
|
78
112
|
|
2
ブラウザ検証結果を追記しました
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
aspect-ratioのmedia queryが使えます。
|
|
1
|
+
aspect-ratioのmedia queryが使えます。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -70,10 +70,10 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
|
|
73
|
+
こちらで動作確認できます。Chrome (Win, Mac), Firefox (Win, Mac), IE11 (Win), Edge (Win) では、大丈夫でした。モバイルは自動再生できないので静画になっちゃいますが、cover な感じで出ます。
|
|
74
|
+
|
|
75
|
+
[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)
|
|
76
|
+
|
|
73
|
-
|
|
77
|
+
codepen版です。
|
|
74
78
|
|
|
75
79
|
[https://codepen.io/hoo-chan/pen/eMdVMv](https://codepen.io/hoo-chan/pen/eMdVMv)
|
|
76
|
-
|
|
77
|
-
codepenだと余計な枠がつくので、枠なし版です。
|
|
78
|
-
|
|
79
|
-
[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じゃない版を追加しました
test
CHANGED
|
@@ -72,4 +72,8 @@
|
|
|
72
72
|
|
|
73
73
|
こちらで動作確認できます。
|
|
74
74
|
|
|
75
|
-
[https://codepen.io/hoo-chan/
|
|
75
|
+
[https://codepen.io/hoo-chan/pen/eMdVMv](https://codepen.io/hoo-chan/pen/eMdVMv)
|
|
76
|
+
|
|
77
|
+
codepenだと余計な枠がつくので、枠なし版です。
|
|
78
|
+
|
|
79
|
+
[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)
|