質問編集履歴

1

動画が表示されない件から、パララックスの画面上下遷移についての問題へ

2020/04/10 05:13

投稿

SFUK
SFUK

スコア4

test CHANGED
File without changes
test CHANGED
@@ -8,11 +8,17 @@
8
8
 
9
9
  どのように直せば動画が表示されるのでしょうか。html側にVIDEOタグで置いたのですが、それだと表示はされても固定されません。如何なものでしょうか。宜しくお願い致します。
10
10
 
11
- html
11
+ ```html
12
12
 
13
13
  <div class="wrap">
14
14
 
15
15
  <div class="parallax No01">
16
+
17
+ /*追記箇所*/
18
+
19
+ <video autoplay muted loop><source src="img/life_is_beautiful.mp4" type="video/mp4"></video>/*ここまで*/
20
+
21
+ </div>
16
22
 
17
23
  </div>
18
24
 
@@ -20,15 +26,41 @@
20
26
 
21
27
    </div>
22
28
 
29
+   <div class="parallax No02">
30
+
31
+ /*追記箇所*/
32
+
33
+ <video autoplay muted loop>
34
+
35
+ <source src="img/キャッチ・ミー・イフ・ユー・キャン - 予告編.mp4" type="video/mp4"></video>/*ここまで*/
36
+
37
+ </div>
38
+
39
+ <div class="message">
40
+
41
+   </div>
42
+
43
+ </div>
44
+
45
+ ```
46
+
23
- CSS
47
+ ```CSS
48
+
49
+ /*削除*/
24
50
 
25
51
  .bg-01 {
26
52
 
27
53
  background: url("img/life_is_beautiful.mp4")
28
54
 
29
- }
55
+ .bg-02 {
30
56
 
57
+ background: url("img/catch_me_if_u_can.mp4")
58
+
59
+ }/*ここまで*/
60
+
61
+
62
+
31
- .parallax{
63
+ .parallax video{
32
64
 
33
65
  height: 1000px;
34
66
 
@@ -40,7 +72,13 @@
40
72
 
41
73
  box-sizing: border-box;
42
74
 
75
+ /*追記*/
76
+
77
+ position:fixed;
78
+
79
+ z-index:-100;
80
+
43
- }
81
+ }/*ここまで*/
44
82
 
45
83
  .message{
46
84
 
@@ -56,11 +94,23 @@
56
94
 
57
95
  }
58
96
 
97
+ ```
98
+
99
+
100
+
59
101
  ### 発生している問題・エラーメッセージ
60
102
 
61
103
 
62
104
 
63
- 動画が何も表示されない。
105
+ 動画が何も表示されない。← 解消
106
+
107
+
108
+
109
+ パララックスの機能がうまくいかない。← 新たな問題
110
+
111
+ つまり、parallax No01のvideoが、parallax No02の場所でも
112
+
113
+ ずっと残って固定されている。No1からNo2のvideoに切り替わらない。
64
114
 
65
115
 
66
116