PCでは動画表示をスマホでは静止画表示に切り替える

Question

###前提・実現したいこと

PCでは動画を表示していますが、スマホでは静止画に切り替えたい。

###発生している問題・エラーメッセージ

classを付けて、画像切り替え等のやり方をしても、動画と静止画は切り替わりません。

どのように指定すればよろしいでしょうか？

###該当のソースコード

<div class="video-wrap"> <video class="pc" src="img/top/top.mp4" autoplay loop> <img src="img/top/top.jpg" alt="Placeholder"> </video> <img class="sp" src="img/top/top.jpg" alt="Placeholder"> </div>

/* パソコンで見たときは"pc"のclassがついた画像が表示される /
.pc { display: block !important; }
.sp { display: none !important; }
/ スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

Comments

[退会済みユーザー]

該当の箇所のHTML, CSSのソースコードと、自身で試してみたコードをご提示ください。

Answer 1

video要素の中にimgがあるのが原因ではないでしょうか

<div class="video-wrap">
<video class="pc" src="img/top/top.mp4" autoplay loop></video>
<!-- 外に出す -->
<img class="sp" src="img/top/top.jpg" alt="Placeholder"> 
</div>

.pc { display: none !important; }したときに一緒に.spも消えてしまいます。

Comments

[nekoneko22]

回答ありがとうございます。
上記の通りに修正してみましたが、やはりスマホで静止画表示ができませんでした。

[退会済みユーザー]

スマホで見た時、動画も静止画もどちらも表示されていない状態ですか？

[nekoneko22]

はい。そうです。背景が黒塗りになっております。

[退会済みユーザー]

PCでは正常に動画が再生されますか？
上手く表示非表示の切り分けが出来てない気がするので、GoogleChromeの開発者ツールなどでPC表示時と、750px以下の時のvideo, img要素それぞれの状態を確認してみてください。

[nekoneko22]

PC上では、画面サイズ751px以上の場合は動画再生され、要素もvideoを指しています。
750px以下の場合は静止画画像に切り替わり、要素はimgを指しています。
スマホでは、背景が黒塗りになってしまします。

[退会済みユーザー]

PCで画面サイズを750px以下にした時は、画像は表示されているということですか？

[nekoneko22]

はい。静止画画像が表示されます。

[退会済みユーザー]

切り分けはできていて、PCの750px以下では画像が表示されるけど、スマホでは表示されない。ということですね
これは今回の質問とは別問題のような気がします。
切り分け自体は出来ているので今回の質問は終了し、新たに「PCでは表示される画像がスマホで表示されない」などの質問を立てた方が良いかもしれません

[nekoneko22]

回答ありがとうございます。
そのようにします。
ご対応、ありがとうございました。

Answer 2

質問が別問題のようなので、一旦取り消します。