【HTML】アップロードした動画の埋め込みタグ
最近は、Youtubeが多いので、
たまにアップした動画を埋め込む際、
動画の埋め込みタグって何だっけ？と
ど忘れしてしまうこともあったりします。
そんな時に、サクッと調べられるように
アップロードした動画の埋め込みタグを
まとめておきたいと思います。
目次
基本形
<video src="●●.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>
このように調整するのも良いのですが、この方法ですと縦横の比率がずれる場合があるため、
縦横比率を固定する方法を行った方が良いですね。