fancybox3でYouTube動画をサクッと開く方法

画像や動画をページ内に簡単にオーバーレイ表示させることが出来るjQueryのプラグインfancyboxを利用してYouTube動画をサクッと表示させる方法をご紹介します。

サクッと対応するためjQueryとfancyboxはCDNを利用したいと思います。

jQuery読み込み

fancyboxを利用するためには先ずjQueryを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

fancybox読み込み

jQueryの次はfancybox本体のJSとCSSを読み込みます。

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

リンク設定

以下のようにYouTube動画を開くためのリンクを設置します。

<a data-fancybox href="https://www.youtube.com/watch?v=[YouTube動画ID]">YouTube動画を開く</a>

完成形ソース

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox href="https://www.youtube.com/watch?v=[YouTube動画ID]">YouTube動画を開く</a>
</body>
</html>

以上の内容でYouTube動画をページ内に表示出来るようになったかと思います。

色々とオプションもありますので、更に詳しい使い方を知りたい方は公式ドキュメントをご覧ください。

fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script

動作環境情報

"jQuery" 3.5.1 
"fancybox3" 3.5.7
エックスサーバー(x10)

コメント

タイトルとURLをコピーしました