「サイトに動画を載せてみたいな」と思ったとき、そのやり方は、サーバーに動画を設置する方法・youtubeやvimeo等のプラットフォームに動画をアップロードし外部コンテンツとして埋め込む方法などいくつか方法があります。
この記事では、Webサイト上でどのように動画を効果的に魅せたいか、の目的別での動画設置方法をまとめています。

メインビジュアル(MV)で動画をループさせ、ダイナミックなサイトにみせたい

この場合に最も適しているのは、videoタグを使った動画設置方法だと思います。
理由は、videoタグを使えば自動再生、ループをさせるか、等のカスタマイズが可能な点と、YoutubeやVimeo等のプラットフォームにのせる場合は、コントロールバーや再生ボタンは基本的にはそのプラットフォームの仕様に準ずる形になると思いますが、videoタグの場合は、その辺のカスタマイズはやり方によって柔軟に対応できるためです。
基本的には動画をファイルにアップロードし、videoタグで呼び出すだけなので、設定も簡単です。jsでの操作も様々にできます。
やり方の詳細は、こちらの記事に記載しています。


一方で、サーバーに動画をあげるため、容量の圧迫や、読み込みの負荷がかかる(ページ読み込み速度遅延)ことは避けられません。
そこで、動画全体の秒数を短く抑えたり、MV等で使う場合は、5MB以下(可能な限り小さく)に抑えるように圧縮するなど、工夫が必要になります。

説明等が含まれる長い動画を音声ありでしっかり見せたい

この場合に適しているのは、YoutubeやVimeo等に動画をアップロードし、外部コンテンツとして動画を埋め込む方法です。
弊社で制作したサイトの例として、オンライン講座の紹介動画をサイトに埋め込んだ事例があります。

このように、説明があり、数秒で終わることのできないコンテンツの場合は、外部コンテンツにして埋め込んでしまった方が、サイト負荷も抑えられ適切です。
また、外部コンテンツにすることのメリットは、その動画のURLとして、YoutubeやVimeoのURLが発行できるので、他のサイトにも埋め込みたい場合や、動画単体で閲覧される可能性がある場合に便利です。



しかし、このデメリットをYoutubeの場合は、カスタマイズの仕方やAPIの使い方によって解消もできます。 こちらの記事も参考にしてみてください。


また、このあと紹介する方法も改善策として使えると思います。

Videoタグと外部動画のコンビネーション

コンビネーションとは、、(笑)の詳細を説明します。


弊社事例ではないのですが、参考になるサイトがあったのでご紹介させていただきます。

ファーストビューからの流れで、とても綺麗に動画が埋め込まれています。
再生ボタンをクリックすると、Youtubeのブランド紹介動画に遷移するような導線になっています。
このような方法でサイト上では見栄え重視で綺麗に、しかしリンクさせることで動画の全貌や、見て欲しいことの詳細をしっかり伝える事ができます。

---

Webサイト上で、どのような点を重視するかで、その魅せ方は何通りもあるかと思います。
一番ベストな方法をご相談させていただきますので、お気軽にご連絡ください。