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

HTML/CSS/PHP
スポンサーリンク

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

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

nakattyさ、この動画を会社HPのトップ画面に持ってきたらカッコいいと思うんだよね。(有料サイトで購入済み)

avatar

BOSS

avatar

nakatty

いやいや、今のままで良いでしょ。てかトップ画像先週変えたばかりだし。これで5度目だし。

でもなんか、違うんだよね〜。ちょっとやってよ〜www

avatar

BOSS

avatar

nakatty

ちっ(舌打ち)。

というやり取りがあり、会社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の気分でまた変わるかもしれません。

avatar

nakatty

BOSSが覚えてくれれば僕がやらずに済むんですけどね

仕事中に情報収集という名目でネットサーフィンばっかしてるみたいですね

avatar

のぶこ

avatar

nakatty

SNSばかりやってますよ、、、。

タイトルとURLをコピーしました