<< 【年始の作業】HTMLサイトの「コピーライトの年」を変更する | main | 結婚をあきらめていた友人に春が来た >>

【YouTube以外で】HTMLコードでサイトに動画を埋め込む方法

<2020/7/9 更新>

 

 

こんにちは。

 

自作の動画を、自分のサイトに埋め込む作業をしましたので、備忘録としてブログに書き残したいと思います。

 

 動画埋め込みといったらYouTubeだけど 

 

動画をサイトに埋め込む必要がでた時に、一番最初に浮かんだ方法は「YouTube」で埋め込む方法でした。

 

YouTubeに動画をアップし、埋め込みコードを自分のサイトに記述するといった作業になります。

 

もっともポピュラーで簡単な方法だと思います。

 

HTMLの知識もほぼ必要ないですから。

 

しかし、今回はYouTube以外の方法で埋め込む方法で動画を埋め込みました。

 

理由は特になく、ただなんとなくなんですが、しいて上げるならイメージ的なところです。

 

コーポレートサイトに商品の使用方法を紹介する動画を埋め込むので、YouTubeじゃない方がスマートな感じがしたのです。

 

 

スポンサーリンク

 

 

 HTMLコードで動画を埋め込む方法 

 

まったく難しくなく、簡単に動画を埋め込むことができます。

 

コードがわからなくてもコピペでいけます。

 

HTML5からvideoタグが実装されています。

 

このvideoタグでは「loop」とか「autoplay」といった機能も実装できます。

 

それでは videoタグを使った実際のHTMLコードを下記に書きます。

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <video playsinline autoplay muted loop width="100%" height="max"><source src="ama.mp4"></video>
  </body>
</html>

 

上記の「ama.mp4」の部分を自分のビデオファイルと同じ名前に変更して下さい。

 

動画の保存場所は、HTMLファイルと同じ階層においてください。

 

上記コード内

 

<video playsinline autoplay muted loop width="100%" height="max"><source src="ama.mp4" /></video>

 

の部分を自サイトの埋め込みたい場所にコピペするだけです。

 

 

 動画のサイズ・ループ再生・オート再生の実装方法 

 

<video playsinline autoplay muted loop width="100%" height="max"><source src="ama.mp4" /></video>

 

上記のコードの解説

 

・aoutoplay=オート再生

・loop=ループ再生

・width=動画の横幅

・height=動画の高さ

・muted=ミュート(消音)

 

また、iPhone(iOS)では、videoタグを使うときに「playsinline属性」がないと表示すらされません。

 

ですから、「プレイヤー非表示で自動再生」をしたいのなら…autoplayとplaysinlineがセットで必要です。

 

オート再生やループ再生はユーザビリティ上、考えてから使うか決めましょう。

 

サイト閲覧していて、急に動画が再生されるのって嫌じゃないですか?

 

Facebookでアップされた動画がオート再生されると凄い迷惑です(笑)

 

 

まとめ

 

<iframe>タグを使って動画のを埋め込む方法もあります。


しかしサイトによっては<iframe>が使用できないところもあるようです。

 

今後は<iframe>から<video>が主流になっていくようですね。

 

動画を埋め込むことで、サイトの印象もまた変わってきますので、この方法ならば凄く簡単にできますよ!

 

何かの役に立てば嬉しいです。

 

 


スポンサーリンク
WEB | comments(0) | -
 
Comment