画像や動画をページ内に簡単にオーバーレイ表示させることが出来る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 | Fancyapps UI - Robust JavaScript UI Component Library
Robust JavaScript UI Component Library
fancyapps.com
動作環境情報
"jQuery" 3.5.1 "fancybox3" 3.5.7 エックスサーバー（x10）
コメント