モーダルウインドウでYOUTUBEの動画を開けるようにしたい

簡単なHTMLとCSSしかわからず、JQueryのプラグインmodal-video.jsを使用しようとしてみましたが、ボタンを押してもウインドウが開きません。

公式のデモを参考にしようとしましたが、
日本語版の解説に記載されている [Videoを開く]ボタンを押してもウインドウは開きませんでした。
https://www.appleple.com/blog/javascript/modal-video-js.html
ただ、英語版の解説に記載されているボタンはウインドウが開きました。
https://appleple.github.io/modal-video/
この違いも分からずじまいです。

記述に間違いがあるのでしょうか。

ソースコード

<!doctype html>
<html><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>demo</title>
	<!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script type="text/javascript" src="js/jquery-v3.3.3.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
	<!-- styleseetのCSS読み込み -->
    <link href="style.css" rel="stylesheet">
	<!-- mainのJS読み込み -->
    <script src="main.js"></script>
	<!-- modal-video.js読み込み -->
	<link rel="stylesheet" type="text/css" href="css/modal-video.min.css">
	<script src="js/modal-video.min.js"></script>
</head>
<body>

<button class="js-modal-btn" data-video-id="7TUOI23spt0">Videoを開く</button>

<script>
$(".js-modal-btn").modalVideo();
</script>

</body>
</html>

行動規範の内容に同意します

回答1件

自己解決

別のモーダルウィンドウ用jQueryプラグインを利用してみたところいけました。
「Magnific Popup」
こちらを参考にhttp://gimmicklog.main.jp/jquery/180/
レスポンシブ対応で使いやすかったです。

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

<title>demo</title>
<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery読み込み -->
<script type="text/javascript" src="js/jquery-v3.3.3.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>
<!-- styleseetのCSS読み込み -->
<link href="style.css" rel="stylesheet">
<!-- mainのJS読み込み -->
<script src="main.js"></script>

</head> <body> <div> <a class="popup-iframe" href="https://www.youtube.com/watch?v=cBVGlBWQzuc"> <div> Videoを開く </div> </a> </div>  <link rel="stylesheet" href="css/magnific-popup.css" /> <script src="js/jquery.magnific-popup.min.js"></script> <script> $(function(){ $('.popup-iframe').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 200, preloader: false, fixedContentPos: false }); }); </script> </body> </html>

投稿2018/10/23 04:33

inada59462628

総合スコア10