video頁面更新

gotovideo.js

@@ -2,36 +2,20 @@
 $(".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);
-
+    $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
 });
-$('.play-video').click(function(){
-	$('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
+
+$(".btn-close").click(function () {
+    $('.youtube-video').attr('src', ``);
 });
 
+$('#exampleModal').on('hidden.bs.modal', function () {
+    $('.youtube-video').attr('src', ``);
+  });
+// $('.play-video').click(function(){
+// 	$('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
+// });
+
 
 // function autoPlayYouTubeModal() {
 //     var trigger = $("body").find('[data-toggle="modal"]');
@@ -48,21 +32,20 @@ $('.play-video').click(function(){
 
 
 
-$(document).on("click", ".btn-close", function (event) {
-    $('.youtube-video').each(function () {
-        this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
-    });
-    console.log('stop');
-});
+// $(document).on("click", ".btn-close", function (event) {
+//     $('.youtube-video').each(function () {
+//         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+//     });
+//     console.log('stop');
+// });
 
 
-$(document).on("click", "#exampleModal", function (event) {
-    $('.youtube-video').each(function () {
-        this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
-    });
-    // alert('111111')
-    // window.location.reload();
+// $(document).on("click", "#exampleModal", function (event) {
+//     $('.youtube-video').each(function () {
+//         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+//     });
+    
 
-});
+// });
 
 

style.css

@@ -732,6 +732,18 @@ p {
   font-size: 28px;
 }
 
+::-webkit-scrollbar-track {
+  display: none;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  display: none;
+}
+
 :-webkit-full-screen #expand {
   display: none;
 }

style.scss

@@ -670,8 +670,6 @@ p {
 
 // 影片導覽區塊
 .video-int {
-  
-    
     .video-btn {
       padding: 15px 0px;
       margin: 5px;
@@ -683,6 +681,19 @@ p {
     
   }
 }
+::-webkit-scrollbar-track {
+  display: none;
+}
+
+::-webkit-scrollbar {
+
+	display: none;
+}
+
+
+::-webkit-scrollbar-thumb {
+  display: none;
+}
 :fullscreen {
   #expand {
     display: none;

video.html

@@ -108,17 +108,17 @@
                 <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-info="AAA8pkLcfY8" data-bs-toggle="modal"
                             data-bs-target="#exampleModal" src="./img/封面/封面_AI Spokesgirl.png" alt="">
                     </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-info="83uE8kVIWsM" data-bs-toggle="modal"
                             data-bs-target="#exampleModal" src="./img/封面/封面_氣象.png" alt="">
                     </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-info="y0dgW_dcgDE" data-bs-toggle="modal"
                             data-bs-target="#exampleModal" src="./img/封面/封面_翠玉.png" alt="">
                     </div>
                 </div>
@@ -133,17 +133,17 @@
                 <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-info="EuI2Lh2FWDo" 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-info="YQx_3O8W7hM" 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-info="kzQKfJyQHc0" data-bs-toggle="modal"
                             data-bs-target="#exampleModal" src="./img/封面/0924(02)_YT封面_地方.png" alt="">
                     </div>
                 </div>
@@ -158,17 +158,17 @@
                 <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-info="hoSKF4X5OgU" 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-info="QQBzJwHjMlk" 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-info="LsS2SXQ1wrs" data-bs-toggle="modal"
                             data-bs-target="#exampleModal" src="./img/封面/1001_YT封面_NFT.png" alt="">
                     </div>
                 </div>
@@ -184,17 +184,17 @@
                 <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-info="LKOLD4ssEIA" 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-info="QVYsivxltkg" 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-info="-udbHXGkqJM" data-bs-toggle="modal"
                             data-bs-target="#exampleModal" src="./img/封面/0907_YT封面_NFT.png" alt="">
                     </div>
                 </div>
@@ -210,17 +210,17 @@
                 <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-info="iZxOOUPWL-Q"
                             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-info="NWyxxTfBAmA" 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-info="C0EHKQX-B4M" data-bs-toggle="modal"
                             data-bs-target="#exampleModal" src="./img/封面/1006_YT封面_NFT.png" alt="">
                     </div>
                 </div>
@@ -235,13 +235,33 @@
             aria-hidden="true">
             <div class="modal-dialog modal-fullscreen">
                 <div class="modal-content bg-transparent border-0">
-                    <div class="modal-header border-0">
+                    <div class="modal-header border-0 pb-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">
-
+                        <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='https://www.youtube.com/embed//XfTQ2uIWWbA'
+                                frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                     </div>
                 </div>
             </div>