動画を視聴中にvideo要素をダブルクリックするとブラウザの機能によって動画が全画面再生されます。便利な機能ではありますが動画を見ながら他の作業をする前提のwebサービスでは不意に全画面表示になるのは厄介です。この記事では動画のダブルクリックによる全画面表示を防止するための方法について紹介します。
Google ChromeやMicrosoft Edgeでは比較的簡単にダブルクリックによる全画面表示を無効化できます。これはvideo要素にcontrolslistという属性を使うことで実現できます。この属性を使うことでブラウザのデフォルト操作を制御することが可能です。
詳細については次のリンクが参考になります。
<video>： 動画埋め込み要素 – HTML： ハイパーテキストマークアップ言語 ｜ MDN#controlslist
HTMLMediaElement controlsList explained ｜ controls-list
controlslist属性を使う場合、以下のように記述します。
<video controls="controls" controlslist="nofullscreen">
<source src="sample-5s.mp4" type="video/mp4">
</video>
controlslistにnofullscreenを追加することで、ダブルクリックによる全画面表示を簡単に無効化することができます。
残念ながら、この方法はFirefoxではサポートされていません。この記事を書いた時点でのCan I useのサポート状況によるとFirefoxとSafariではcontrolslist属性のnofullscreenオプションが利用できません。このため別の方法で対策を講じる必要があります。
ダブルクリックによる動画の全画面化はキャンセル可能なイベントを起点にしているわけではないため通常のpreventDefault()などの手法では対処できません。そこで、code>video要素の上にdiv要素を被せることでクリックを防ぐ方法を使用します。
実装例は次です。
<head>
<style>
.videoWrapper {
position: relative;
display: inline-block;
height: 240px;
}
video {
background-color: black;
width: 100%;
height: 100%;
}
.video-control-guard {
width: 100%;
/* Firefox限定 */
@supports (-moz-appearance:none) {
/* 32pxは動画プレイヤーのシークバー等のコントロール部の高さ */
height: calc(100% - 32px);
}
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="videoWrapper">
<video controls="controls" controlslist="nofullscreen">
<source src="sample-5s.mp4" type="video/mp4">
</video>
<div class="video-control-guard"></div>
</div>
</body>
この方法ではposition: absoluteでvideo要素の上からdivを被せることによって大部分のクリックイベントを防止します。これにより動画をクリックしてもvideo要素を直接クリックしたことにはならず全画面表示が行われなくなります。CSSのheight: calc(100% - 32px);は、Firefoxにおける動画のコントロール部分（シークバーなど）を妨げずに動画本体の上にのみdiv要素を被せるために設定しています。Firefox131.0.3では文字サイズを変更したり画面を拡大縮小したりしてもこの高さでいい感じになります。
このようにしてvideo要素に紐づくブラウザによる全画面化を制御できます。動画の連打で疑似的なコマ送りをしたいユーザー等がいる場合、こういった制御は特に役に立ちます。
