usecases fix

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5503
+  "liveServer.settings.port": 5504
 }

gotovideo.js

@@ -16,7 +16,7 @@ $(document).on("click", ".btn-close", function (event) {
     $('.youtube-video').each(function () {
         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
     });
-
+    console.log('stop');
 });
 
 

usecases.html

@@ -35,13 +35,13 @@
           <div class="row my-5">
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');" data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="MplGQ5JUmnY"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_1">產品介紹</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/教育.png');"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/教育.png');" data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="gFjSwMEoXNg"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_2">教育培訓</lan></h3>
                 </div>
               </div>
@@ -53,85 +53,15 @@
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');" data-bs-toggle="modal" data-bs-target="#usecase-news"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');" data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="XfTQ2uIWWbA"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_4">新聞播報</lan></h3>
                 </div>
-                <div class="closeplay modal fade" id="usecase-news" tabindex="-1" aria-labelledby="exampleModalLabel2"
-                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 class="modal-body">
-                            <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 src='https://www.youtube.com/embed//XfTQ2uIWWbA'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
-                    </div>
-                </div>
-                </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/內容創作.png');" data-bs-toggle="modal" data-bs-target="#usecase-personal"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/內容創作.png');" data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="Svl4eBYNfxQ"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_5">個人內容創作</lan></h3>
                 </div>
-                <div class="closeplay modal fade" id="usecase-personal" tabindex="-1" aria-labelledby="exampleModalLabel2"
-                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 class="modal-body">
-                            <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 src='https://www.youtube.com/embed//Svl4eBYNfxQ'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
-                    </div>
-                </div>
-                </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
@@ -141,51 +71,25 @@
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');" data-bs-toggle="modal" data-bs-target="#usecase-museum"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');" data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="F2WkhfddLQY"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_7">展覽導覽</lan></h3>
                 </div>
-                <div class="closeplay modal fade" id="usecase-museum" tabindex="-1" aria-labelledby="exampleModalLabel2"
-                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 class="modal-body">
-                            <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 src='https://www.youtube.com/embed//F2WkhfddLQY'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
-                    </div>
-                </div>
-                </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');" data-bs-toggle="modal" data-bs-target="#usecase-ad"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');" data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="E4Dt7eU3WCo"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_8">廣告行銷</lan></h3>
                 </div>
-                <div class="closeplay modal fade" id="usecase-ad" tabindex="-1" aria-labelledby="exampleModalLabel2"
+              </div>
+              <div class="col-12 col-md-6 my-4">
+                <div class="usecase-block card text-center">
+                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');"></div>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_9">機構資訊宣導</lan</h3>
+                </div>
+              </div>
+          </div>
+      </div>
+      <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel2"
                 aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content bg-transparent border-0">
@@ -214,22 +118,12 @@
                                     height: 100%;
                                 }
                             </style>
-                            <div class='embed-container'><iframe src='https://www.youtube.com/embed//E4Dt7eU3WCo'
+                            <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//XfTQ2uIWWbA'
                                     frameborder='0' allowfullscreen></iframe></div>
                         </div>
                     </div>
                 </div>
                 </div>
-              </div>
-              <div class="col-12 col-md-6 my-4">
-                <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_9">機構資訊宣導</lan</h3>
-                </div>
-              </div>
-          </div>
-      </div>
-
     </section>
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
@@ -240,6 +134,19 @@
         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>
+        $(".usecase-imgfr").click(function () {
+            let ytid = $(this).data('ytid');
+            $('.youtube-video').attr('src', `https://www.youtube.com/embed//${ytid}`);
+        });
+        $(".btn-close").click(function () {
+            $('.youtube-video').attr('src', ``);
+        });
+        $('#exampleModal').on('hidden.bs.modal', function () {
+          $('.youtube-video').attr('src', ``);
+        });
+    </script>
 </body>
 
 </html>