HTML5/埋め込み/source要素/端末ディスプレイサイズで画像や動画を切替えるHTML&CSS

動画をレスポンシブで切り替える

スマホには動画Aを表示
PCには動画Bを表示

html

<div id="video-rpsv"> 
　　<video id="video-pc" playsinline autoplay loop muted preload="auto" poster="[代替画像URL]" >
　　　　<source type="video/mp4" src="[動画URL A]" data-src="video_pc.mp4">
　　</video>
</div>
<div id="video-rpsv"> 
  <video id="video-sp" playsinline autoplay loop muted preload="auto" poster="[代替画像URL]" >
    <source type="video/mp4" src="[動画URL B]" data-src="video_sp.mp4">
  </video>
</div>

css

#video-rpsv {text-align: center;}

#video-pc {width: 100%;}
@media only screen and (max-width: [表示上限]px) {
  #video-pc {display:none;}
  #video-sp {width: 100%;}
}

画像をレスポンシブで切り替える

スマホには縦画像を表示
PCには横画像を表示

<div id="img"> 
<picture>

<!-- 縦画像 -->
<source media="(max-width: [表示上限]px)" srcset="[画像URL:A]" alt="">
<!-- 横画像 -->
<img src="[画像URL:B]" alt="">
</picture>
</div>