update

gotovideo.js

@@ -0,0 +1,30 @@
+// $('.btn-close').click(function () {
+//     $('.youtube-video').each(function () {
+//         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+//     });
+// });
+
+// $('.closeplay').click(function () {
+//     $('.youtube-video').each(function () {
+//         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+//     });
+// });
+
+
+
+$(document).on("click", ".btn-close", function (event) {
+    $('.youtube-video').each(function () {
+        this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+    });
+
+});
+
+
+$(document).on("click", "#exampleModal", function (event) {
+    $('.youtube-video').each(function () {
+        this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+    });
+    // alert('111111')
+    // window.location.reload();
+
+});

video.html

@@ -66,7 +66,8 @@
             </div>
 
         </div>
-        <img id='gotop' width="50" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/go-up.png"alt="">
+        <img id='gotop' width="50" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/go-up.png"
+            alt="">
 
     </section>
     <div style="margin-top: 100px;">
@@ -75,19 +76,19 @@
             <h1 class="p-2" set-lan="html:5G_network">5G網路</h1>
             <div class="row row-cols-lg-3 px-0 mx-0">
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#exampleModal01"
-                        src="./img/封面/1007_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//iZxOOUPWL-Q?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1007_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#exampleModal02"
-                        src="./img/封面/1005_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//NWyxxTfBAmA?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1005_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#exampleModal03"
-                        src="./img/封面/1006_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//C0EHKQX-B4M?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1006_YT封面_NFT.png" alt="">
                 </div>
             </div>
-
+            <!-- 
             <div class="closeplay modal fade" id="exampleModal01" tabindex="-1" aria-labelledby="exampleModalLabel1"
                 aria-hidden="true">
                 <div class="modal-dialog modal-lg">
@@ -192,26 +193,26 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </section>
         <!-- NFT -->
         <section class="sec-video" id='NFT-video'>
             <h1 class="p-2">NFT</h1>
             <div class="row row-cols-lg-3 px-0 mx-0">
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#NFT-video01"
-                        src="./img/封面/0818_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//LKOLD4ssEIA?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0818_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#NFT-video02"
-                        src="./img/封面/0819_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QVYsivxltkg?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0819_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#NFT-video03"
-                        src="./img/封面/0907_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//-udbHXGkqJM?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0907_YT封面_NFT.png" alt="">
                 </div>
             </div>
-            <div class="closeplay modal fade" id="NFT-video01" tabindex="-1" aria-labelledby="exampleModalLabel"
+            <!-- <div class="closeplay modal fade" id="NFT-video01" tabindex="-1" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content bg-transparent border-0">
@@ -317,26 +318,26 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </section>
         <!-- metaverse -->
         <section class="sec-video" id='metaverse-video'>
             <h1 class="p-2" set-lan="html:metaverse">元宇宙</h1>
             <div class="row row-cols-lg-3 px-0 mx-0">
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#metaverse01"
-                        src="./img/封面/0923_IG封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//hoSKF4X5OgU?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0923_IG封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#metaverse02"
-                        src="./img/封面/0927_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QQBzJwHjMlk?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0927_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#metaverse03"
-                        src="./img/封面/1001_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//LsS2SXQ1wrs?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1001_YT封面_NFT.png" alt="">
                 </div>
             </div>
-            <div class="closeplay modal fade" id="metaverse01" tabindex="-1" aria-labelledby="exampleModalLabel2"
+            <!-- <div class="closeplay modal fade" id="metaverse01" tabindex="-1" aria-labelledby="exampleModalLabel2"
                 aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content bg-transparent border-0">
@@ -440,26 +441,28 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </section>
         <!-- dailypaper -->
         <section class="sec-video" id='dailypaper-video'>
             <h1 class="p-2" set-lan="html:local_news">地方日報</h1>
             <div class="row row-cols-lg-3 px-0 mx-0">
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#dailypaper01"
-                        src="./img/封面/0923(1)_YT封面_地方.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//EuI2Lh2FWDo?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0923(1)_YT封面_地方.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#dailypaper02"
-                        src="./img/封面/0917(03)_YT封面_地方.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//YQx_3O8W7hM?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0917(03)_YT封面_地方.png"
+                        alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#dailypaper03"
-                        src="./img/封面/0924(02)_YT封面_地方.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//kzQKfJyQHc0?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0924(02)_YT封面_地方.png"
+                        alt="">
                 </div>
             </div>
-            <div class="closeplay modal fade" id="dailypaper01" tabindex="-1" aria-labelledby="exampleModalLabel2"
+            <!-- <div class="closeplay modal fade" id="dailypaper01" tabindex="-1" aria-labelledby="exampleModalLabel2"
                 aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content bg-transparent border-0">
@@ -563,26 +566,29 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </section>
         <!-- vtuber -->
         <section class="sec-video" id='VTuber-video'>
             <h1 class="p-2">VTuber</h1>
             <div class="row row-cols-lg-3 px-0 mx-0">
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#VTuber01"
-                        src="./img/封面/0726_YT封面_Vtuber.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//ie31G94r7QE?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0726_YT封面_Vtuber.png"
+                        alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#VTuber02"
-                        src="./img/封面/0727_YT封面_Vtuber.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QIbinFBjJxA?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0727_YT封面_Vtuber.png"
+                        alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-bs-toggle="modal" data-bs-target="#VTuber03"
-                        src="./img/封面/0804_YT封面_Vtuber.png" alt="">
+                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//6JVBDIM7zac?enablejsapi=1"
+                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0804_YT封面_Vtuber.png"
+                        alt="">
                 </div>
             </div>
-            <div class="closeplay modal fade" id="VTuber01" tabindex="-1" aria-labelledby="exampleModalLabel2"
+            <!-- <div class="closeplay modal fade" id="VTuber01" tabindex="-1" aria-labelledby="exampleModalLabel2"
                 aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content bg-transparent border-0">
@@ -686,8 +692,24 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </section>
+
+        <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel1"
+            aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content bg-transparent border-0">
+                    <div class="modal-header border-0">
+                        <h5 class="modal-title" id="exampleModalLabel"></h5>
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                            aria-label="Close"><img src="./img/close.svg" alt=""></button>
+                    </div>
+                    <div id="video-modal" class="modal-body">
+
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -697,6 +719,7 @@
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="js/lan.js"></script>
+    <script src="./gotovideo.js"></script>
     <script>
         $("*").each(function (index, element) {
             // 此元素被點選後執行
@@ -737,6 +760,46 @@
             $("html").stop();
         });
 
+        $(".video-img").click(function () {
+            var videosrc = $(this).data("info");
+            console.log(videosrc);
+
+            let VideoContent = `
+            <style>
+            .embed-container {
+            position: relative;
+            padding-bottom: 56.25%;
+            height: 0;
+            overflow: hidden;
+            max-width: 100%;
+            }
+            .embed-container iframe,
+            .embed-container object,
+            .embed-container embed {
+            position: absolute;
+            top: 0;
+            left: 0;
+             width: 100%;
+             height: 100%;
+            }
+            </style>
+            <div class='embed-container'><iframe class='youtube-video' src='${videosrc}'
+            frameborder='0' allowfullscreen></iframe></div>
+            `;
+            $('#video-modal').html(VideoContent);
+        });
+
+        // $('.btn-close').click(function () {
+        //     $('.youtube-video').each(function () {
+        //         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+        //     });
+        // });
+
+        // $('.closeplay').click(function () {
+        //     $('.youtube-video').each(function () {
+        //         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+        //     });
+        // });
     </script>
 </body>