最近は、Youtubeが多いので、
たまにアップした動画を埋め込む際、
動画の埋め込みタグって何だっけ？と
ど忘れしてしまうこともあったりします。

そんな時に、サクッと調べられるように
アップロードした動画の埋め込みタグを
まとめておきます。

HTMLで動画を埋め込むにはvideoタグを使います。
実務ではsourceタグを使う方法もあるため、あわせて解説します。

基本形

基本的には controls を付けた状態で使うのがおすすめです。

<video src="●●.mp4"></video>

実務ではこちらの書き方が推奨されます

<video controls autoplay muted>
  <source src="●●.mp4" type="video/mp4">
</video>

コントロールパネルを表示する場合

<video src="●●.mp4" controls></video>

自動再生＋消音する場合

chromeやsafariでは音がでないように設定する必要があります。

<video src="●●.mp4" autoplay muted></video>

繰り返し再生する場合

<video src="●●.mp4" loop autoplay muted></video>

開始画面の画像を設定する方法

<video src="●●.mp4" poster="■■.jpg" controls></video>

インライン再生を可能にする方法

スマホで動画を再生しようとすると全画面表示になってしまうことがあります。
全画面表示せず、そのまま再生させることが出来るのがインライン再生です。

autoplay、muted、playsinlineは、必須です。

<video autoplay muted playsinline src="●●.mp4"></video>

縦と横のサイズを指定する方法

<video width="200px" height="133px" src="●●.mp4"></video>

このように調整するのも良いのですが、この方法ですと縦横の比率がずれる場合があるため、
縦横比率を固定する方法を行った方が良いですね。

・mp4形式になっているか
・パス（URL）が正しいか
・autoplayの場合はmutedが付いているか
・サーバーに正しくアップされているか

・controls：再生ボタンを表示
・autoplay：自動再生
・muted：消音（自動再生に必須）
・loop：繰り返し再生
・poster：サムネイル画像
・playsinline：スマホで全画面再生を防ぐ

是非、お試しください。