CUBESは寝屋川・枚方・神戸を中心にホームページ制作・ウェブデザイナーとして活動しています。

 ホーム >   ブログ >  webについて > ホームページにvideoタグで動画を埋め込む
2021年04月12日

ホームページにvideoタグで動画を埋め込む

どうも!寝屋川のホームページ制作会社CUBESの小林です。

今後は、ホームページに画像の代わりに動画を入れることが増えてくると思います。

YouTubeの動画を表示する場合はiframeタグの使用やWordPressだとURLを入力するだけで表示されますが、今回はYouTube以外の動画をアップする方法になります。

HTML5では簡単にvideoタグで動画を表示することが出来ます。

例えばこんな感じでホームーページに動画を表示できます。

Videoタグの使い方

videoタグはimgタグと同じように簡単に動画を表示できます。
画像形式にjpgやtiffがあるように動画にも色々なフォーマットがあります。WebMやFLVAVI、QuickTimeなどの形式もありますが、現在は再生ブラウザーが多い「mp4」がおすすめです。

videoタグで動画を表示

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

<video></video>の中には何も入力しなくても大丈夫です。動画パスは画像ファイルと同じsrc=にパスを書きます。
ただ、このままだと動画ファイルサイズのまま表示されます。また再生ボタンも表示されないので使い勝手が悪いです。

このような感じで。


真っ暗で使い勝手わるいですね。ではカスタマイズしていきます。(iPhoneだと真っ白で表示されているはずです。)

videoタグ カスタマイズ:コントロールパネルの表示

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

srcのあとに「controls」を追加するだけで再生ボタンなどのコントローラーが表示できます。

videoタグ カスタマイズ:サムネイルの表示

<video src="hogehoge.mp4" poster=“hoge.jpg” controls></video>

動画が真っ黒な画面から始まると内容が判らず再生数が伸びないので内容がわかるサムネイルを表示します。
poster=“****.jpg”を追加することで、動画の1コマ目に****.jpgが表示されます。(ただ、このサンプルではなぜか表示されない減少が・・・現在、原因を調査中です。)

vidoeタグ カスタマイズ:レスポンシブに対応

<video src="hogehoge.mp4" width="100%" height="auto"></video>

「width=”100%” height=”auto”」を追加します。こちらで動画コントロール・レスポンシブ対応になります。

その他にも動画自動再生、ループ再生などのカスタマイズもありますが実用的ではないので、今回は省きます。

この記事を書いた人

寝屋川のホームページ制作会社CUBES(キューブス)代表コバヤシ ヒデキ

コバヤシ ヒデキ

Design Creates CUBES(デザイン クリエイツ キューブス)代表のコバヤシです。

中小企業・クリニック・動物病院・展示会系ホームページ制作・運営サポートを得意としております。お客様や会社・お店のイメージをユーザビリティーを第一に考慮したデザインで、清潔感や信頼感、暖かみのあるホームページ作りを得意としています。

特に病院・クリニック・動物物病院さまホームページは、大変満足いただいております。

 ホーム >   ブログ >  webについて > ホームページにvideoタグで動画を埋め込む