PCでは表示される画像がスマホで表示されない。

Question

<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>

<style>
/* パソコンで見たときは"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; }
}
</style>

```###前提・実現したいこと
PC表示では（751px以上）video動画が表示され、スマホ表示（750px以下）では静止画像を表示したい。
PC表示とスマホ表示で動画と静止画を切り替えたい。

###発生している問題・エラーメッセージ
PC上では解像度（751px以上）では背景video動画が表示され、（750px以下）では静止画像に切り替わる。
ただし、スマホ専用の表示にすると、背景video動画が表示されます。

実際にスマホで見ると、動画も静止画も表示されず、背景が黒塗りに表示されます。


###該当のソースコード
 <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>

<style>
/* パソコンで見たときは"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; }
}
</style>

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

Answer 1

<div class="video-wrap"> <video id="video" autoplay loop poster="img/top/top.jpg" width="100%" height="100%"><source src="img/top/top.mp4"></video> </div>