HTML5でvideoタグを使用して動画を埋め込む際のコントロールバー（シークバー）のカスタマイズ方法
<video>タグではcontrols=”false”を設定することでコントロールバー（シークバー）を非表示にすることができます。
また、ontrolsListの設定でダウンロードボタンの非表示などのカスタマイズも可能です。
ただしコントロールバーを非表示にした場合はユーザーの操作で再生などの処理を行うことができないため注意が必要です
この記事では<video>タグで動画をWebサイトに表示させる場合に気をつけることなどを紹介します。
詳しい設定は<video>タグのリファレンスも合わせてご覧ください
目次（読みたい所をクリック!!）
コントロールバーの設定と挙動
コントロールバーは「controls=”true”」で表示され、falseで非表示になります。
trueにしていると、動画が再生されていない間はコントロールバーがずっと表示されていて、再生中はマウスオーバー時のみコントロールバーが表示されます。
コントロールバーを非表示にしている場合、動画をクリックしても再生されませんので、別途Javascriptなどで再生の処理を設定する必要があります。
また、メインビジュアルのように動画を自動再生する場合は、コントロールボタンなしで運用するのも良いと思います。
ios、iphoneでvideoタグの注意点
iPhoneの場合、playsinlineをつけないと動画再生時に全画面表示になるので注意。
自動再生の場合もplaysilineをつけた上でmuteをつけないと動かないので注意してください。
後、poster画像を設定しなければ再生前は何も要素がないような状態になります。
コントロールバーを非表示にして独自で実装する方法
シークバーや時間のみを非表示にする場合はコントロールバーを非表示にする必要がありますが再生などが出来ないので独自のコントロールバーを実装する必要があります。
方法は以下記事を参考にしてください
https://liginc.co.jp/web/js/jquery/82904
ダウンロードを禁止する方法
<video>タグではデフォルトで右下にダウンロードボタンが表示されています。
ちなみに動画はNHKが提供している素材を使用させていただきました！
素晴らしい！！
http://www1.nhk.or.jp/creative/material/
ダウンロードボタンを非表示にする
ダウンロードを完全に禁止することは難しいですがchromeにてダウンロードボタンを非表示にしてついでに右クリックを禁止する方法であればある程度はダウンロードされるのを防ぐことは出来そうです。
<video ontrolsList="nodownload" oncontextmenu="return false;">ontrolsListにはnodownload, nofullscreen, noremoteplaybackの設定が可能です。
WordPressでvideoタグをいれるオススメの設定
16：9の動画を掲載することが多い場合は、予めクラスを用意しておくことで動画読み込み前に高さを確保できるのでページスクロール中にロードが終わり表示がガクガクすることもなくなります。
WordPressでvideoタグのダウンロードを禁止にする方法
デフォルトではダウンロード禁止のオプションが存在しないのでビデオブロックで動画を挿入し、それをHTML編集で<video>タグに下記コードを入れる必要があります。
ontrolsList="nodownload" oncontextmenu="return false;"