WEBサイト制作案件でTOPページへ動画を使用することになりましたが、
スマホで動画が表示されない問題が発生しましたので、正しいMP4形式の動画を埋め込む方法について紹介致します。

まずこだわりとして、jQueryは使用しません。

そして、この記事をご覧の方へ伝えたいことの一つに
WEBサイトのTOPページでの動画使用は出来るだけやめましょう。

読み込みが遅く、その際にユーザーが離れてしまう可能性があるので
写真を使うことをおすすめします。

それでも動画を使いたい方に使い方をご紹介致します。

video.jsをCDNで読み込む

公式サイトはこちらになります。

まずはheadタグ内にこちらを追加しましょう

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />

次に</body>上に追加しましょう

<script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>

ではここからHTMLを記載していきます。

<div class="movie">
    <video src="video.mp4" id="movie_movie" style="width: 100%;" autoplay muted loop preload="auto" playsinline>
    </video>
 </div>

CSSの記載方法(例)

.movie{
 width:100%;
 height:600px;
}

コードの説明

ではコードの説明を致します。
まずは、CDNでvideo.jsを読み込みます。

次にHTMLをコピペしましょう。

div要素を表示したい動画サイズに設定し、
<video>タグを親要素いっぱいにすることで動画を表示できます。

autoplay

自動再生してくれる属性

muted

無音にする属性でスマホ対応するために必ず設定しましょう。

loop

動画をループする際に使用します。

preload=”auto”

こちらを設定すると前もって動画を読み込んでくれる属性です。

playsinline

こちらはスマホでも読み込めるようにする設定です。

できれば使いたくない

動画はファーストビューでの印象は強いですが、
読み込みが遅いためユーザーが離脱する可能性があります。

そのため、画像のスライドやJavascriptでのアニメーションを使用することがおすすめです。

様々な使用方法など詳しく知りたい方はvideojs公式サイトをご覧ください。

画像のスライドに関してはこちらの記事で写真付きでご説明しておりますので

是非御覧ください。