video-made responsive

KALIPEM · Apr 18, 2024 · c8501a2 · c8501a2
1 parent 445f425
commit c8501a2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/assets/videos/edited/website-hero-video-mobile-cp.mp4 b/assets/videos/edited/website-hero-video-mobile-cp.mp4
diff --git a/index.html b/index.html
@@ -76,7 +76,8 @@
             </nav>
 
             <div class = "banner-content" >
-                <video id="hero-video" src="assets/videos/edited/website-hero-video-cp.mp4" autoplay muted></video>
+                <video id="hero-video" src="assets/videos/edited/website-hero-video-cp.mp4" autoplay muted alt="hero video transition made for pc view"></video>
+                <video id="hero-video-mb" src="assets/videos/edited/website-hero-video-mobile-cp.mp4" autoplay muted alt="hero video transition made for mobile view"></video>
                 <div class = "banner-badge">join Gen<span style="font-size: 25px;font-weight: 700;">0</span></div>
                 <h1 class = "banner-title">Level Up <br> Your Career With Prompt Engineering</h1>
                 <p class = "lead-text">Embark on a journey with our expert Prompt Engineering developers. Unlock your true potential as we propel your career or business to new heights with tailored solutions for unprecedented success. Join our innovative community and explore the limitless horizons of Prompt Engineering, transforming your future collaboratively.</p>

diff --git a/script.js b/script.js
@@ -86,7 +86,15 @@ $(document).ready(function(){
     })
 });
 
-const video = document.getElementById('hero-video');
+let videoId;
+
+if (window.innerWidth > 420) {
+  videoId = 'hero-video';
+} else {
+  videoId = 'hero-video-mb';
+}
+
+const video = document.getElementById(videoId);
 let loopCount = 0;
 const maxLoopCount = 3; // Define the maximum number of loops