回答編集履歴

1

重複投稿の削除

2020/10/10 02:32

投稿

lacco
lacco

スコア11

test CHANGED
@@ -1,261 +1 @@
1
- ```html
2
-
3
- <!DOCTYPE html>
4
-
5
- <html lang="en">
6
-
7
- <head>
8
-
9
- <meta charset="UTF-8">
10
-
11
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
-
13
- <link rel="stylesheet" href="css/back1.css">
14
-
15
- <link rel="stylesheet" href="css/modal.css">
16
-
17
- <title>Document</title>
18
-
19
- </head>
20
-
21
- <body>
22
-
23
- <div class="participants" id="app">
24
-
25
- <div class="participant play">
26
-
27
- <div class="left"><img src="image/151.png" alt="" class="participant-image"></div>
28
-
29
- <div class="right">
30
-
31
- <p class="participant-belonging">Akoukou</p>
32
-
33
- <p class="participant-name">tanaka</p>
34
-
35
- <p class="message">aaaaaaaaa</p>
36
-
37
- </div>
38
-
39
- </div>
40
-
41
- <div class="movie-modal">
42
-
43
- <div class="modal-box">
44
-
45
- <div class="modal-inner">
46
-
47
- <div class="movie"><iframe id="player" width="640" height="360" src="https://www.youtube.com/embed/gvWTsHTxUzs?rel=0&loop=1&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe></div>
48
-
49
- </div>
50
-
51
- </div>
52
-
53
- </div>
54
-
55
- </div>
56
-
57
- </div>
58
-
59
-
60
-
61
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
62
-
63
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
64
-
65
- <script type="text/javascript" src="js/modal.js"></script>
66
-
67
- </body>
68
-
69
- </html>
70
-
71
- ```
72
-
73
- ```css
74
-
75
- .wrap {
76
-
77
- margin: 50px auto 0;
78
-
79
- }
80
-
81
-
82
-
83
- .play {
84
-
85
- text-align: center;
86
-
87
- cursor: pointer;
88
-
89
- font-size: 40px;
90
-
91
- font-weight: bold;
92
-
93
- }
94
-
95
-
96
-
97
- .movie-modal {
98
-
99
- position: fixed;
100
-
101
- left: 0;
102
-
103
- top: 0;
104
-
105
- width: 100%;
106
-
107
- height: 100%;
108
-
109
- opacity: 0;
110
-
111
- background-color: rgba(000, 000, 000, 0.96);
112
-
113
- pointer-events: none;
114
-
115
- transition: all 0.5s;
116
-
117
- z-index: 10;
118
-
119
- }
120
-
121
- .movie-modal.active {
122
-
123
- opacity: 1;
124
-
125
- pointer-events: all;
126
-
127
- }
128
-
129
-
130
-
131
- .modal-box {
132
-
133
- position: relative;
134
-
135
- max-width: 600px;
136
-
137
- width: 100%;
138
-
139
- height: 100%;
140
-
141
- margin: 0 auto;
142
-
143
- z-index: 1;
144
-
145
- }
146
-
147
-
148
-
149
- .modal-inner {
150
-
151
- position: absolute;
152
-
153
- top: 50%;
154
-
155
- width: 100%;
156
-
157
- transform: translate(0, -50%);
158
-
159
- }
160
-
161
-
162
-
163
- .movie {
164
-
165
- position: relative;
166
-
167
- width: 100%;
168
-
169
- padding-bottom: 56.25%;
170
-
171
- z-index:30;
172
-
173
- }
174
-
175
-
176
-
177
- .movie iframe {
178
-
179
- position: absolute;
180
-
181
- top: 0;
182
-
183
- left: 0;
184
-
185
- width: 100%;
186
-
187
- height: 100%;
188
-
189
- }
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
- @media screen and (max-width:640px){
198
-
199
- .wrap {
200
-
201
- width: 100%;
202
-
203
- }
204
-
205
- }
206
-
207
- ```
208
-
209
- ```javascript
210
-
211
- $(function(){
212
-
213
- $(".play").on("click",function(){
214
-
215
- $(".movie-modal").addClass("active");
216
-
217
- $("html").css({"overflow-y":"hidden"});
218
-
219
- return false;
220
-
221
- });
222
-
223
- });
224
-
225
-
226
-
227
- var tag = document.createElement('script');
228
-
229
- tag.src = "https://www.youtube.com/iframe_api";
230
-
231
- var firstScriptTag = document.getElementsByTagName('script')[0];
232
-
233
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
234
-
235
- var player;
236
-
237
- function onYouTubeIframeAPIReady() {
238
-
239
- player = new YT.Player("player",{
240
-
241
- });
242
-
243
- }
244
-
245
-
246
-
247
- $(document).on('click',function(e){
248
-
249
- if(e.target.class!=='movie'){
250
-
251
- player.pauseVideo();
252
-
253
- $(".movie-modal").removeClass("active");
254
-
255
- $("html").css({"overflow-y":"auto"});
256
-
257
- }
258
-
259
- });
260
-
261
- ```
1
+ 重複投稿してしまいました