もくじ
Webサイトに動画を埋め込む方法
Webサイトのトップページにメインビジュアルとして動画を埋め込みたい。それにはどのような方法があるのか、メリットやデメリット、私なりの最善の方法をご紹介します。
YouTube動画として埋め込む
編集した動画をYouTubeにアップし、その埋め込みコードをコピーしHTMLにペーストする方法です。
メリットとしては、動画を読み込むわけではないので、Webサイトの表示が遅くなりません。自動で再生されることもなく、見たい人は再生ボタンを押し、見たくない人はそのままスクロールできます。
デメリットは見た目です。YouTubeを埋め込んだのが一目瞭然の見た目。YouTubeへのリンクもできるので、ファーストビューからいきなりYouTubeへ行ってしまいWebサイトを離脱されてしまいます。
ビデオタグで埋め込む
動画をYouTubeに投稿せず、videoタグで埋め込むことができます。この方が見た目がシンプルで、ページ全体のイメージが変わることもありません。
見た目はいいのですが、ページの表示に時間がかかります。
私が考える最善の方法
トップページのメインビジュアルなので、YouTube動画のような見た目で表示させたくない。
videoタグで埋め込むと読み込みに時間がかかり、ページの表示に時間がかかります。
できれば、videoタグでどうにかしたいという場合、私が考える最善の方法を紹介します。
Adobe PremiereProで編集するのがお勧め
- まずは、動画の解像度を1920×1080になっていれば、比率を維持したまま縮小します。例えば1280×720に縮小します。
- 動画の長さを10秒程度になるようにトリミングします。
- フレームレートを30から24に変更します。
フレームレートとは、1秒間の静止画の枚数です。普通に撮影するとフレームレートは30です。
フレームレート30だと、10秒間で300枚。フレームレートを24に変更すると10秒間で60枚減少します。
ファイルサイズも大きく変わるので、フレームレートを下げるのは読み込みを速くするのに有効です。
これでmp4で書き出します。