WEBデザイナーの皆さん、ポートフォリオサイトや製品紹介ページで、モーダルウィンドウライブラリ「Fancybox」を使って動画ギャラリーを実装する機会は多いでしょう。
しかし、Fancybox v5 (または v4) を使って複数の動画を配置した際、「モーダルを開いた瞬間」や「次の動画にページ送りした瞬間」に、意図せず動画が自動再生されてしまう現象に悩んでいませんか？
これは Fancybox v5 のデフォルト設定が原因ですが、幸いにも簡単なオプション指定で解決可能です。
この記事では、2025年現在のモダンな実装方法として、Fancybox v5 (旧 v3 のような jQuery 依存なし) を前提に、動画の自動再生を確実に停止させる方法を解説します。
v3と違う！Fancybox v5/v4 で動画自動再生を止める autoplay: false の指定方法
古い Fancybox v3 (jQuery が必須だった時代) の記事ではvideo: { autoStart: false } といった情報が見つかりますが、2025年現在の v5 (または v4) では、この記述は機能しません。v5 ではオプションの体系が刷新されており、HTML5 動画の制御は
Html5Video オブジェクトで行います。HTMLの構成例
HTML 側は v3 時代と大きく変わりません。data-fancybox 属性でグループ化するだけです。以前のような ul や li によるリスト構造は必須ではありません。
|
1 2 3 |
<a href="assets/movies/movie1.mp4" data-fancybox="gallery-movie">動画 1</a> <a href="assets/movies/movie2.mp4" data-fancybox="gallery-movie">動画 2</a> <a href="assets/movies/movie3.mp4" data-fancybox="gallery-movie">動画 3</a> |
JavaScript (Fancybox v5) の設定
v5 では jQuery は不要です。v5 のスクリプト（Panzoom）を読み込み、Fancybox.bind() メソッドを使って初期化します。ポイントは、オプションとして
Html5Video: { autoplay: false } を指定すること。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* * Fancybox v5 (Panzoom.js) の CDN 読み込み例 * 実際にはダウンロードしてローカルで管理することを推奨します */ // <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" /> // <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> /* 初期化スクリプト */ document.addEventListener('DOMContentLoaded', function() { // セレクタ '[data-fancybox="gallery-movie"]' にマッチする全要素に... Fancybox.bind('[data-fancybox="gallery-movie"]', { // ここが重要！ // HTML5 Video の設定 Html5Video: { // 自動再生を false (無効) に設定 autoplay: false, /* (補足) v5 のデフォルトは autoplay: true, muted: "auto" です。 これはブラウザの自動再生ポリシー（ミュートならOK）に 準拠するための設定ですが、今回はこれを無効化します。 */ } // 他のオプション (例: ツールバーの非表示など) // Toolbar: false, }); }); |
Fancybox動画実装の結論：v5は Html5Video オプションでUXを最適化
Fancybox v5 で動画ギャラリーを実装する際、自動再生を停止するにはFancybox.bind() のオプションで Html5Video: { autoplay: false } を指定します。古い v3 の情報 (
video.autoStart) と混同しないよう注意してください。ユーザーが自らの意志で「再生」ボタンを押す。この当たり前の操作性を担保することが、サイト全体の信頼性とUX向上につながります。たった1行のコードで、より快適な閲覧体験を提供しましょう。
コメント