videoタグの属性について
<video playsinline autoplay muted loop width="100%" height="max" src=""></video>widthは、動画の横幅を設定できます。
heightは、動画の高さを設定できます。
playsinlineは、動画をインライン再生出来ます。これがないとiPhoneやiPadで再生されない。
autoplayは、htmlの読み込みと同時に、動画が自動再生されます。
mutedは、動画の音声をミュートに出来ます。
loopは、動画が繰り返し再生されます。
srcは、動画のurlを書きます。
<video controls playsinline width="100%" height="max" controlsList="nodownload" oncontextmenu="return false;" preload="metadata" poster="" src=""></video>controlsは、再生や停止に必要なコントロールバーを表示出来ます。
posterは、サムネイル画像のurlを書きます。
preloadは、metadataで、再生時間やファイルサイズのようなメタ情報のみ先に読み込みます。noneで、事前読み込み禁止。autoは初期値で、動画ファイルを事前読み込みします。autoplayを書いている場合は、preloadは効きません。
controlsListは、nodownloadで、動画右下のその他のオプションをクリックした時、ダウンロードの選択肢がなくなります。動画を閲覧のみとし、ダウンロード不可に出来ます。
oncontextmenuは、return falseで、動画上で右クリックした時、動画保存などの選択肢が出なくなります。動画を保存できないようにすることが出来ます。
さいごに
横型動画だと、これでレスポンシブになります。縦型動画だと、やたら大きくなってしまう為、別途CSSでmax-widthを付け加えると良いでしょう。
今日は、ありがとうございました。では、また！