画像（img・picture・background-image）と動画（video デフォルト・自動再生・画面サイズ出し分け）の設置例です。
img（PC／SP共通）
img（PC/SP出し分け）
background-image
videoタグデフォルト
controls を付けると、ブラウザが音量・シーク・一時停止などの再生コントロールを表示する（MDN: video）。
自動再生
autoplay は多くのブラウザで音声付きだとブロックされるため、muted を付与する。playsinline はモバイルでインライン再生するために推奨される（MDN: video）。
画面サイズによる出し分け
<source> の media 属性にメディアクエリ（例: (min-width: 800px)）を指定し、画面幅に応じて読み込む動画を切り替える。MDNではブラウザが上から順に条件に合う source を選ぶとあるが、リサイズ時にソースが切り替わるかどうかはブラウザによって挙動が違う（MDN: video）。
<video> 内の <source> にある media 属性は、<picture> のようなレスポンシブ切替としては実質機能しない。Chrome や Safari では条件が無視されることが多く、画面幅による動画切替は期待通り動かない場合がある。本来の用途は type 属性と組み合わせ、webm や mp4 など動画フォーマットのフォールバックを指定することだ。