【HTML】自社サイトに動画を埋め込む方法【埋め込み】

私は2018年に知人と会社を立ち上げ、現在は２名で会社をやっている。HPの更新などは基本、私が全てやっているのである。
ある日、いつも通り会社のHPを更新していた時の話である。
なんでも良さそうな動画を見つけたので、その動画を会社HPのトップで流したいというのである。

————–以下私とBOSSのやりとり—————-

というやり取りがあり、会社HPのTOPに動画が流れる様にしたので、その方法をまとめようと思う。

動画を埋め込むタグ

私の会社のHPはWordPressで作っています。
なのでHTMLに直接動画を埋め込んでしまえばバッチリ動画を流すことができます。

HTMLに動画を埋め込む場合<video>というタグを使えば簡単に↓みたいな感じで動画を埋め込むことができます。

<video>タグで使えるプロパティ

<video>では色々なプロパティが使えます。
以下のプロパティを組み合わせれば何かと便利になると思います。

プロパティ	説明
controls	操作パネルを表示
width	動画の横幅を指定
height	動画の縦幅を指定
poster	動画が表示できない時にパスを指定した画像を表示
autoplay	動画の自動再生
loop	動画の繰返し再生
muted	動画の音を再生しない
preload	preload=”none” → 再生されるまで何もダウンロードしない preload=”metadata” → メタデータのみダウンロード preload=”auto” → 動画データを全部ダウンロード
playsinline	iOSで動画をインライン再生

ちなみに↑の方で埋め込んでる動画は↓のような感じでHTMLに埋め込んでます。

controls…操作パネル
loop…繰返し
playsinline…iOSのインライン再生
poster…動画が再生できない時に表示する画像

こんな感じでHTMLに動画を埋め込むことができました。
controlsプロパティをつけると親切か不親切か動画のダウンロードボタンとかも付いてきちゃうので、動画をダウンロードされたく無い場合はつけな方が良さそうです。

まとめ

HTMLに動画を埋め込む方法をまとめました。
会社のHPに実装はしましたが、BOSSの気分でまた変わるかもしれません。