ブログ

htmlページにmp4動画を埋め込む

キービジュアルなどの代わりに動画置いたり

どうってことないはずなのに、なぜかハマって時間を費やしてしまったので、作業メモ(自分のため)

<div class="main_visual">
  <video width="100%" muted autoplay playsinline controls loop>
    <source src="img/hogehoge.mp4" type="video/mp4">
  </video>
</div>

muted 音声なしで再生

autoplay 自動で再生

playsinline スマホの時にインライン再生させる

(インライン再生させるためには muted / autoplay / playsinline が必須)

controls コントローラーを表示

loop 動画を自動で繰り返し再生させる

コピペできるようにベーシックなスタイル。