teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードを記載

2017/11/22 01:11

投稿

nekoneko22
nekoneko22

スコア6

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,21 @@
1
+ ```ここに言語を入力
2
+ <div class="video-wrap">
3
+ <video class="pc" src="img/top/top.mp4" autoplay loop> <img src="img/top/top.jpg" alt="Placeholder"> </video>
4
+ <img class="sp" src="img/top/top.jpg" alt="Placeholder">
5
+ </div>
6
+
7
+ <style>
8
+ /* パソコンで見たときは"pc"のclassがついた画像が表示される */
9
+ .pc { display: block !important; }
10
+ .sp { display: none !important; }
11
+ /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
12
+ @media only screen and (max-width: 750px) {
13
+ .pc { display: none !important; }
14
+ .sp { display: block !important; }
15
+ }
16
+ </style>
17
+
1
- ###前提・実現したいこと
18
+ ```###前提・実現したいこと
2
19
  PC表示では(751px以上)video動画が表示され、スマホ表示(750px以下)では静止画像を表示したい。
3
20
  PC表示とスマホ表示で動画と静止画を切り替えたい。
4
21
 
@@ -15,6 +32,7 @@
15
32
  <img class="sp" src="img/top/top.jpg" alt="Placeholder">
16
33
  </div>
17
34
 
35
+ <style>
18
36
  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
19
37
  .pc { display: block !important; }
20
38
  .sp { display: none !important; }
@@ -22,4 +40,5 @@
22
40
  @media only screen and (max-width: 750px) {
23
41
  .pc { display: none !important; }
24
42
  .sp { display: block !important; }
25
- }
43
+ }
44
+ </style>