[jQuery]Fancyboxでモーダルの動画自動再生を停止する方法

jQuery

2024.10.022025.09.22

Fancyboxで複数の動画をモーダルで開き、ページ送りで再生させる際、初期設定のままだと1つの動画が終了したら自動で次の動画が再生されてしまいます。

それを解除する方法です。

HTML

<ul>
	<li>
		<a href="movie1.mp4" data-fancybox="movie">動画1</a>
	</li>
	<li>
		<a href="movie1.mp4" data-fancybox="movie">動画2</a>
	</li>
	<li>
		<a href="movie1.mp4" data-fancybox="movie">動画3</a>
	</li>
</ul>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

Javascript

初期設定だと、の動画のautoStartがtrueになっているので、これをfalseにします。

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery.fancybox.css" />
<script src="jquery.fancybox.min.js"></script>

<script>
/*オプション*/
jQuery(function ($) {
	$('[data-fancybox="movie"]').fancybox({
		video : {
			autoStart : false
		}
	});
});
</script>