Making videos truly responsive

assets/css/style.css

@@ -2553,9 +2553,20 @@
 	color: var(--main-color);
 }
 
-.banner-one_image{
+.banner-one_image {
+	width: 100%;
 	position: relative;
-}
+  }
+
+  .banner-one_image iframe.desktop {
+	height: 56.25vw; /* 16:9 ratio (9/16 = 0.5625) */
+	width: 100%;
+  }
+
+  .banner-one_image iframe.mobile {
+	height: 100vw; /* 9:16 ratio (16/9 = 1.7777) */
+	width: 177.77vh; /* Adjust to maintain aspect ratio within the viewport */
+  }
 
 .banner-one_icon{
 	position: absolute;

assets/js/script.js

@@ -914,8 +914,22 @@
 		wow.init();
 	}
 
+// Add the iframe video change script here
+window.onload = function() {
+    var iframe = document.getElementById('videoIframe');
+    var desktopVideoSrc = "https://iframe.mediadelivery.net/embed/158903/34249d47-d76d-4931-9f65-7bc02569348f?autoplay=true&loop=true&muted=true&preload=true&responsive=true";
+    var mobileVideoSrc = "https://iframe.mediadelivery.net/embed/158903/68480987-85e4-4a42-bbde-81f12fe8c7ff?autoplay=true&loop=true&muted=true&preload=true&responsive=true";
 
 
+
+
+    if (window.innerWidth < 768) {
+        iframe.src = mobileVideoSrc;
+    } else {
+        iframe.src = desktopVideoSrc;
+    }
+};
+
 /* ==========================================================================
    When document is Scrollig, do
    ========================================================================== */

index.html

@@ -241,6 +241,13 @@ <h1 class="banner-one_heading">Najbardziej wspierająca społeczność <span>w&n
 				</div>
 			</div>
 			<div class="banner-one_icon" style="background-image: url(assets/images/main-slider/banner-icon.png)"></div>
+			<!-- Play different iframes, depending on viewport device.-->
+			<div class="banner-one_image">
+				<iframe id="videoIframe" loading="lazy" class="desktop" style="border:0;" allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;" allowfullscreen="true" title="Nagranie z 1 spotkania Hackerów"></iframe>
+			</div>
+
+
+
 			<div class="banner-one_image" style="height:788px;width: 100%;">
 				 <!-- <img src="assets/images/main-slider/banner.png" alt=""> -->
 				 <iframe src="https://iframe.mediadelivery.net/embed/158903/34249d47-d76d-4931-9f65-7bc02569348f?autoplay=true&loop=true&muted=true&preload=true&responsive=true" loading="lazy" style="border:0;top:0;height:100%;width:100%;" allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;" allowfullscreen="true" title="Nagranie z 1 spotkania Hackerów"></iframe>