I added a video popup on clicking the watch story button and also a n…

…ew cursor to give it rich look
apu52 · Jan 11, 2025 · 0d24245 · 0d24245
1 parent eeb0e5c
commit 0d24245
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 13 deletions.
diff --git a/cursor.png b/cursor.png
diff --git a/index.html b/index.html
@@ -172,6 +172,13 @@
         align-items: flex-end;
         width: auto;
       }
+      body {
+  cursor: none;
+}
+body {
+  cursor: url('cursor.png'), auto;
+}
+
     }
 
     .circle {
@@ -631,21 +638,22 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
 
 
             <br>
-            <div class="story">
-              <div class="video">
-                <img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg" type="video/mp4"
-                  style="box-shadow:2px 2px 8px blue;">
-                <!-- link to the hmtl page with the video -->
-                <a href="story.html" class="btn_video">
-                  <span><i class="ri-play-fill"></i></span>
-                </a>
+            <div class="video-container">
+              <a href="javascript:void(0);" class="btn_video" onclick="showPopup()">
+                <span><i class="ri-play-fill"></i></span>
+              </a>
+              <br>
+              <span data-aos="fade-in" style="color: #5755b6; font-weight: 600;">Watch our story</span>
+            </div>
+
+            <!-- Popup -->
+            <div id="videoPopup" class="popup">
+              <div class="popup-content">
+                <span class="close-btn" onclick="hidePopup()">&times;</span>
+                <iframe id="videoFrame" src="story.html" frameborder="0" allowfullscreen></iframe>
               </div>
-
             </div>
-            <br>
-            <span data-aos="fade-in" style="color: #5755b6; font-weight: 600;">Watch our story</span>
-          </div>
-        </div>
+
       </section>
     </header>
 
@@ -667,6 +675,46 @@ <h1 class="headingofAbout section__title" data-aos="fade-in"><b>About Us</b></h1
                 <!-- Article with about us content -->
                 <article class="w-full text-left format sm:format-base lg:format-lg format-blue dark:format-invert">
                   <!-- Adding the content -->
+                   <style>
+                    /* Popup Styles */
+                    .popup {                     
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.8);
+                    z-index: 1000;
+                    }
+
+                    .popup-content {
+                      position: relative;
+                      margin: 5% auto;
+                      width: 90%;
+                      max-width: 1000px;
+                      background: #fff;
+                      padding: 0;
+                      border-radius: 8px;
+                      overflow: hidden;
+                      aspect-ratio: 16 / 9; /* Dynamically adjust height based on width for a 16:9 ratio */
+                    }                        
+                    iframe {
+                    width: 100%;
+                    height: 600px; /* Increases the height of the video */
+                    border: none;
+                    }                               
+
+                    .close-btn {
+                      position: absolute;
+                      top: 10px;
+                      right: 10px;
+                      font-size: 24px;
+                      color: #000;
+                      cursor: pointer;
+                    }
+
+                   </style>
                   <style>
                     /* CSS for hover effect */
                     .aboutcontent:hover {
@@ -1053,7 +1101,18 @@ <h1 class="card-title">Times Square</h1>
         <button class="swiper-button-prev"></button>
         <button class="swiper-button-next"></button>
       </div>
+      <script>
+        function showPopup() {
+  const popup = document.getElementById("videoPopup");
+  popup.style.display = "block";
+}
 
+function hidePopup() {
+  const popup = document.getElementById("videoPopup");
+  popup.style.display = "none";
+}
+
+      </script>
       <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
       <script src="explore.js"></script>
       </section>