質問編集履歴

3

追記

2020/11/20 08:48

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,3 @@
1
- 問題のページは下記です。
2
-
3
- https://koukoku-unyou.com/search/exe/
4
-
5
1
  ```
6
2
 
7
3
  <video class="company-name-video" poster="<?php echo get_template_directory_uri(); ?>//img/high-five.png" autoplay loop muted>

2

ページURLの追記

2020/11/20 08:47

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,7 @@
1
+ 問題のページは下記です。
2
+
3
+ https://koukoku-unyou.com/search/exe/
4
+
1
5
  ```
2
6
 
3
7
  <video class="company-name-video" poster="<?php echo get_template_directory_uri(); ?>//img/high-five.png" autoplay loop muted>

1

コード全体の追記

2020/11/18 18:16

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -19,3 +19,157 @@
19
19
  上記のコードでposterが表示されずに困っています。
20
20
 
21
21
  よろしくお願いします。
22
+
23
+
24
+
25
+ 追記:ビデオタグのセクションは以下のような感じです。
26
+
27
+ ```
28
+
29
+ <section class="company-name">
30
+
31
+ <div class="company-name-wrap">
32
+
33
+ <!-- 背景用の動画ファイル -->
34
+
35
+ <video class="company-name-video" poster="<?php echo get_template_directory_uri(); ?>//img/high-five.png" autoplay loop muted>
36
+
37
+ <!-- <source src="<?php echo get_template_directory_uri(); ?>//img/high-five.mp4"> -->
38
+
39
+ <!-- <source src="<?php echo get_template_directory_uri(); ?>//img/high-five.mov"> -->
40
+
41
+ </video>
42
+
43
+ <!-- 背景の上に表示させたいコンテンツ -->
44
+
45
+ <div class="company-name-title">
46
+
47
+ <p>
48
+
49
+ <?php the_field('title'); ?>
50
+
51
+ </p>
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ </section>
58
+
59
+ ```
60
+
61
+ ```
62
+
63
+ // 会社概要セクション
64
+
65
+ .company-name {
66
+
67
+ height: 500px;
68
+
69
+ &-wrap {
70
+
71
+ max-width: 1140px;
72
+
73
+ margin: 0 auto;
74
+
75
+ overflow: hidden;
76
+
77
+ }
78
+
79
+ }
80
+
81
+ .company-name::before{
82
+
83
+ content:"";
84
+
85
+ display:block;
86
+
87
+ position:fixed;
88
+
89
+ top:0;
90
+
91
+ left:0;
92
+
93
+ z-index:-1;
94
+
95
+ width:100%;
96
+
97
+ height:100vh;
98
+
99
+ background-repeat:no-repeat;
100
+
101
+ background-position:50% 100%;
102
+
103
+ background: rgba(0, 0, 0, 0.6);
104
+
105
+ background-size:cover;
106
+
107
+ }
108
+
109
+
110
+
111
+ // ビデオ
112
+
113
+ /* ----- 背景用の動画ファイル ----- */
114
+
115
+ .company-name-video {
116
+
117
+ position: fixed;
118
+
119
+ right: 0;
120
+
121
+ bottom: 0;
122
+
123
+ min-width: 100%;
124
+
125
+ min-height: 100%;
126
+
127
+ width: auto;
128
+
129
+ height: auto;
130
+
131
+ z-index: -100;
132
+
133
+ background-image:url(../img/high-five.png);
134
+
135
+ background-size: cover;
136
+
137
+ }
138
+
139
+ /* ----- 背景の上に表示させたいコンテンツ ----- */
140
+
141
+ .company-name-title{
142
+
143
+ position: relative; /*必ず必要*/
144
+
145
+ z-index: 2; /*必ず必要*/
146
+
147
+ display: flex;
148
+
149
+ width: 50%;
150
+
151
+ justify-content: center;
152
+
153
+ align-items: center;
154
+
155
+ text-align:center;
156
+
157
+ margin: auto;
158
+
159
+ p {
160
+
161
+ padding-top: 208px;
162
+
163
+ font-size: 54px;
164
+
165
+ // color: white;
166
+
167
+ color: rgba(255,255,255,0.7);
168
+
169
+ font-weight: bold;
170
+
171
+ }
172
+
173
+ }
174
+
175
+ ```