video 頁面更新

about.html

@@ -50,31 +50,32 @@
                     </div>
                     <div class="col-lg-1 px-0">
                         <!-- <nav style="margin-top: 40px;" class="navbar"> -->
-                            <div style="margin-top: 40px;">
-                                <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
-                                    <li class="nav-item dropdown">
-                                        <a class="nav-link dropdown-toggle" style="font-size: 18px;" href="#" id="navbarDropdown" role="button"
-                                            data-bs-toggle="dropdown" aria-expanded="false">
-                                            中/En
-                                        </a>
-                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
-                                                    onclick="changeLan(this);window.location.reload();"
-                                                    value="en">English</button>
-                                            </li>
-                                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
-                                                    onclick="changeLan(this);window.location.reload();"
-                                                    value="zh">中文</button></li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                                <div style="float: left;" class="me-auto mt-2">
-                                    <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
-                                           style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
-                                    <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;"
-                                        class="border-0"><i class="fas fa-compress text-dark"></i></a>
-                                </div>
+                        <div style="margin-top: 40px;">
+                            <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
+                                <li class="nav-item dropdown">
+                                    <a class="nav-link dropdown-toggle" style="font-size: 18px;" href="#"
+                                        id="navbarDropdown" role="button" data-bs-toggle="dropdown"
+                                        aria-expanded="false">
+                                        中/En
+                                    </a>
+                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
+                                                onclick="changeLan(this);window.location.reload();"
+                                                value="en">English</button>
+                                        </li>
+                                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                                onclick="changeLan(this);window.location.reload();"
+                                                value="zh">中文</button></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                            <div style="float: left;" class="me-auto mt-2">
+                                <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
+                                        style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
+                                <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;"
+                                    class="border-0"><i class="fas fa-compress text-dark"></i></a>
                             </div>
+                        </div>
                         <!-- </nav> -->
                     </div>
                 </div>
@@ -154,7 +155,6 @@
 
         </div>
 
-
     </section>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -165,15 +165,19 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="js/lan.js"></script>
     <script>
+      
+        //   openFullscreen();
         var expandbtn = document.getElementById("expand");
         var compressionbtn = document.getElementById("compression");
 
         // Using JavaScript to open the page in fullscreen mode
         var elem = document.documentElement;
+
         function openFullscreen() {
             if (elem.requestFullscreen) {
                 elem.requestFullscreen();
                 compressionbtn.style.display = 'inline';
+                // alert('hi')
             } else if (elem.webkitRequestFullscreen) { /* Safari */
                 elem.webkitRequestFullscreen();
             } else if (elem.msRequestFullscreen) { /* IE11 */

features.html

@@ -36,7 +36,7 @@
                     <img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png" alt="">
                     <div class="card-img-overlay">
                         <div class="mt-3 me-2">
-                            <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white">簡介</h1>
+                            <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white">特色</h1>
                         </div>
                     </div>
                 </div>
@@ -214,7 +214,7 @@
                 </button>
             </div>
         </section>
-        <i style="font-size: 48px; position: absolute; bottom:50px; right:50px; color:#193179; cursor: pointer;"
+        <i style="font-size: 48px; position: fixed; bottom:50px; right:50px; color:#193179; cursor: pointer;"
             data-gt-target="#top" data-gt-duration="500" class="gotop fas fa-chevron-circle-up"></i>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"

js/lan.js

@@ -168,6 +168,7 @@ var zh = {
     "make_video_hand": "手動製作影片",
     "make_video_auto": "自動影片製作",
     "make_video_trial": "免費註冊使用",
+    "application":"實際應用",
     "5G_network": "5G網路",
     "metaverse": "元宇宙",
     "local_news": "地方日報",
@@ -303,6 +304,7 @@ var en = {
     "make_video_auto": "Auto Video Maker",
     "make_video_trial": "Free Trial",
     "5G_network": "5G Network",
+    "application":"Application",
     "metaverse": "Metaverse",
     "local_news": "Local News",
     "index-about": "About",

style.css

@@ -722,15 +722,14 @@ p {
   left: 3.5rem;
 }
 
-.video-int .video-box {
-  margin-top: 30px;
-}
-
-.video-int .video-box .video-btn {
-  padding: 15px 50px;
-  width: 280px;
-  background: #fff;
-  font-size: 32px;
+.video-int .video-btn {
+  padding: 15px 0px;
+  margin: 5px;
+  width: 180px;
+  border: none;
+  color: #fff;
+  background: #3C57A7;
+  font-size: 28px;
 }
 
 :-webkit-full-screen #expand {
@@ -927,21 +926,6 @@ p {
   border-left: 0.3em solid transparent;
 }
 
-.video-sec01 {
-  height: 100vh;
-}
-
-.video-sec01 .video-int .video-box {
-  margin-top: 30px;
-}
-
-.video-sec01 .video-int .video-box .video-btn {
-  padding: 15px 50px;
-  width: 250px;
-  background: #fff;
-  font-size: 32px;
-}
-
 #gotop {
   cursor: pointer;
   position: fixed;
@@ -950,7 +934,7 @@ p {
 }
 
 .sec-video {
-  height: 50vh;
+  margin-bottom: 100px;
 }
 
 .video-img {

style.scss

@@ -670,14 +670,17 @@ p {
 
 // 影片導覽區塊
 .video-int {
-  .video-box {
-    margin-top: 30px;
+  
+    
     .video-btn {
-      padding: 15px 50px;
-      width: 280px;
-      background: #fff;
-      font-size: 32px;
-    }
+      padding: 15px 0px;
+      margin: 5px;
+      width: 180px;
+      border:none;
+      color:#fff;
+      background: #3C57A7;
+      font-size: 28px;
+    
   }
 }
 :fullscreen {
@@ -747,6 +750,7 @@ p {
     }
   }
   .homepage-line {
+    // position: fixed;
     position: absolute;
     bottom: 50px;
     width: 70vw;
@@ -827,21 +831,7 @@ p {
   }
 }
 
-// 影片導覽區塊
-.video-sec01 {
-  height: 100vh;
-  .video-int {
-    .video-box {
-      margin-top: 30px;
-      .video-btn {
-        padding: 15px 50px;
-        width: 250px;
-        background: #fff;
-        font-size: 32px;
-      }
-    }
-  }
-}
+
 
 #gotop {
   cursor: pointer;
@@ -851,7 +841,7 @@ p {
 }
 
 .sec-video {
-  height: 50vh;
+  margin-bottom: 100px;
 }
 
 .video-img {

video.html

@@ -12,698 +12,224 @@
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+        integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+
     <link rel="stylesheet" href="./style.css">
 </head>
 
 <body id="top">
     <section style="position: relative;">
+        <img style="position: absolute; left:15vw; top:8.5vw;z-index: 10;" width="150" src="./img/line_2.png" alt="">
         <div class="video-sec01 card border-0">
             <!-- <img src="./img/T1.png" class="card-img img-fluid" alt="..."> -->
-            <div class="card-img-overlay pb-0">
-                <div class="ai-spokesgril">
-                    <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
-                        href="./index.html"><img class="me-3" style="width: 50px;" src="./img/圖片1.png" alt="">AI
-                        Spokesgirl</a>
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
-                                data-bs-toggle="dropdown" aria-expanded="false">
-                                中/En
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
-                                        onclick="changeLan(this)" value="en">English</button></li>
-                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
-                                        onclick="changeLan(this)" value="zh">中文</button></li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>
-                <section class="video-int text-center" style="margin-top:100px;">
-                    <div class="video-box">
-                        <button type="button" data-gt-target="#5G-video" data-gt-duration="800" data-gt-offset="0"
-                            class="video-btn" set-lan="html:5G_network">5G網路</button>
-                    </div>
-                    <div class="video-box">
-                        <button type="button" data-gt-target="#NFT-video" data-gt-duration="800" data-gt-offset="0"
-                            class="video-btn">NFT</button>
-                    </div>
-                    <div class="video-box">
-                        <button type="button" data-gt-target="#metaverse-video" data-gt-duration="800"
-                            data-gt-offset="0" class="video-btn" set-lan="html:metaverse">元宇宙</button>
+            <div class="row px-0 mx-0">
+                <div class="col-lg-2 px-0">
+                    <div class="card border-0">
+                        <img style="width:14vw;" src="./img/about/home_六角.png" alt="...">
+                        <div class="card-img-overlay d-flex justify-content-center align-items-center">
+                            <div>
+                                <a href="./index.html">
+                                    <img class="home-btn"
+                                        style="width: 70px; position: relative; right:1.5vw; bottom:20px;"
+                                        src="./img/about/home_黑.png" alt="">
+                                </a>
+                            </div>
+                        </div>
                     </div>
-                    <div class="video-box">
-                        <button type="button" data-gt-target="#dailypaper-video" data-gt-duration="800"
-                            data-gt-offset="0" class="video-btn" set-lan="html:local_news">地方日報</button>
+                </div>
+                <div class="col-lg-9 px-0">
+                    <div class="card border-0">
+                        <img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png" alt="">
+                        <div class="card-img-overlay">
+                            <div class="mt-3 me-2">
+                                <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white">影片導覽</h1>
+                            </div>
+                        </div>
                     </div>
-                    <div class="video-box">
-                        <button type="button" data-gt-target="#VTuber-video" data-gt-duration="800" data-gt-offset="0"
-                            class="video-btn">VTuber</button>
+                </div>
+                <div class="col-lg-1 px-0">
+                    <!-- <nav style="margin-top: 40px;" class="navbar"> -->
+                    <div style="margin-top: 40px;">
+                        <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
+                            <li class="nav-item dropdown">
+                                <a class="nav-link dropdown-toggle" style="font-size: 18px;" href="#"
+                                    id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                    中/En
+                                </a>
+                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
+                                            onclick="changeLan(this);window.location.reload();"
+                                            value="en">English</button>
+                                    </li>
+                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                            onclick="changeLan(this);window.location.reload();" value="zh">中文</button>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <div style="float: left;" class="me-auto mt-2">
+                            <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
+                                    style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
+                            <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;"
+                                class="border-0"><i class="fas fa-compress text-dark"></i></a>
+                        </div>
                     </div>
+                    <!-- </nav> -->
+                </div>
+            </div>
+            <div class="video-int" style="margin-left: 23vw; margin-top: -3.5vw;">
+                <button type="button" data-gt-target="#VTuber-video" data-gt-duration="800" data-gt-offset="0"
+                    class="video-btn" set-lan="html:application">實際應用</button>
+                <button type="button" data-gt-target="#dailypaper-video" data-gt-duration="800" data-gt-offset="0"
+                    class="video-btn" set-lan="html:local_news">地方日報</button>
+                <button type="button" data-gt-target="#metaverse-video" data-gt-duration="800" data-gt-offset="0"
+                    class="video-btn" set-lan="html:metaverse">元宇宙</button>
+                <button type="button" data-gt-target="#NFT-video" data-gt-duration="800" data-gt-offset="0"
+                    class="video-btn">NFT</button>
+                <button type="button" data-gt-target="#5G-video" data-gt-duration="800" data-gt-offset="0"
+                    class="video-btn" set-lan="html:5G_network">5G網路</button>
 
-                </section>
 
             </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="">
+
+        </div>
+        <i style="font-size: 48px; position: fixed; bottom:50px; right:50px; color:#193179; cursor: pointer;"
+            data-gt-target="#top" data-gt-duration="500" class="gotop fas fa-chevron-circle-up"></i>
 
     </section>
     <div style="margin-top: 100px;">
-        <!-- 5G -->
-        <section class="sec-video" id='5G-video'>
-            <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-info="https://www.youtube.com/embed//iZxOOUPWL-Q?enablejsapi=1&version=3&playerapiid=ytplayer"
-                        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-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-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">
-                    <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//iZxOOUPWL-Q'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+        <div style="margin-bottom: 100px;">
+            <!-- 實際應用 -->
+            <section class="sec-video" style="width: 75vw; margin: 0 auto" id='VTuber-video'>
+                <!-- <h1 class="p-2">實際應用</h1> -->
+                <div class="row row-cols-lg-3 px-0 mx-0">
+                    <div class="col">
+                        <img class="video-img img-fluid"
+                            data-info="https://www.youtube.com/embed//AAA8pkLcfY8?enablejsapi=1" data-bs-toggle="modal"
+                            data-bs-target="#exampleModal" src="./img/封面/封面_AI Spokesgirl.png" alt="">
                     </div>
-                </div>
-            </div>
-            <div class="closeplay modal fade" id="exampleModal02" 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 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//NWyxxTfBAmA'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <img class="video-img img-fluid"
+                            data-info="https://www.youtube.com/embed//83uE8kVIWsM?enablejsapi=1" data-bs-toggle="modal"
+                            data-bs-target="#exampleModal" src="./img/封面/封面_氣象.png" alt="">
                     </div>
-                </div>
-            </div>
-            <div class="closeplay modal fade" id="exampleModal03" 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 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//C0EHKQX-B4M'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <img class="video-img img-fluid"
+                            data-info="https://www.youtube.com/embed//y0dgW_dcgDE?enablejsapi=1" data-bs-toggle="modal"
+                            data-bs-target="#exampleModal" src="./img/封面/封面_翠玉.png" alt="">
                     </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-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-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-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"
-                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//LKOLD4ssEIA'
-                                    frameborder='0' allowfullscreen></iframe></div>
-
-                        </div>
+            
+            </section>
+            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:application">實際應用</h1>
+        </div>
+        <div style="margin-bottom: 100px;">
+               <!-- dailypaper -->
+            <section class="sec-video" style="width: 75vw; margin: 0 auto" 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-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>
-            </div>
-            <div class="closeplay modal fade" id="NFT-video02" tabindex="-1" aria-labelledby="exampleModalLabel"
-                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//QVYsivxltkg'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <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>
-            </div>
-            <div class="closeplay modal fade" id="NFT-video03" tabindex="-1" aria-labelledby="exampleModalLabel"
-                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//-udbHXGkqJM'
-                                    frameborder='0' allowfullscreen></iframe></div>
-
-                        </div>
+                    <div class="col">
+                        <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> -->
-        </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-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-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-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"
-                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//hoSKF4X5OgU'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+            </section>
+            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:local_news">地方日報</h1>
+        </div>
+     
+        <div style="margin-bottom: 100px;">
+            <!-- metaverse -->
+            <section class="sec-video" style="width: 75vw; margin:auto"  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-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>
-            </div>
-            <div class="closeplay modal fade" id="metaverse02" 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//QQBzJwHjMlk'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <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>
-            </div>
-            <div class="closeplay modal fade" id="metaverse03" 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//LsS2SXQ1wrs'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <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> -->
-        </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-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-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-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"
-                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//EuI2Lh2FWDo'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+            </section>
+            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:metaverse">元宇宙</h1>
+        </div>
+
+        
+        <div style="margin-bottom: 100px;">
+            <!-- NFT -->
+            <section class="sec-video" style="width: 75vw; margin: 0 auto" 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-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>
-            </div>
-            <div class="closeplay modal fade" id="dailypaper02" 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//YQx_3O8W7hM'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <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>
-            </div>
-            <div class="closeplay modal fade" id="dailypaper03" 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//kzQKfJyQHc0'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <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> -->
-        </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-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-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-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"
-                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//ie31G94r7QE'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+               
+            </section>
+            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3">NFT</h1>
+        </div>
+        <div style="margin-bottom: 100px;">
+
+            <!-- 5G -->
+            <section class="sec-video" style="width: 75vw; margin: 0 auto" id='5G-video'>
+                <!-- <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-info="https://www.youtube.com/embed//iZxOOUPWL-Q?enablejsapi=1&version=3&playerapiid=ytplayer"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1007_YT封面_NFT.png" alt="">
                     </div>
-                </div>
-            </div>
-            <div class="closeplay modal fade" id="VTuber02" 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//QIbinFBjJxA'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <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>
-            </div>
-            <div class="closeplay modal fade" id="VTuber03" 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//6JVBDIM7zac'
-                                    frameborder='0' allowfullscreen></iframe></div>
-                        </div>
+                    <div class="col">
+                        <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> -->
-        </section>
+            </section>
+            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:5G_network">5G網路</h1>
+        </div>
+          
+
+
 
         <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel1"
             aria-hidden="true">
@@ -721,7 +247,7 @@
             </div>
         </div>
     </div>
-   
+
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -732,9 +258,9 @@
     <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) {
             // 此元素被點選後執行
@@ -768,7 +294,33 @@
                 }
             });
         });
-
+        var expandbtn = document.getElementById("expand");
+        var compressionbtn = document.getElementById("compression");
+
+        // Using JavaScript to open the page in fullscreen mode
+        var elem = document.documentElement;
+        function openFullscreen() {
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+                compressionbtn.style.display = 'inline';
+            } else if (elem.webkitRequestFullscreen) { /* Safari */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) { /* IE11 */
+                elem.msRequestFullscreen();
+            }
+        }
+
+        function closeFullscreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+                compressionbtn.style.display = 'none';
+
+            } else if (document.webkitExitFullscreen) { /* Safari */
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) { /* IE11 */
+                document.msExitFullscreen();
+            }
+        }
         // 避免動畫與使用者滾輪衝突
         // html 在滾動滾輪時 停止 html 所有效果
         $("html").on("mousewheel", function () {