feat: added dinamic videos at why-program

assets/css/index.css

@@ -1770,6 +1770,7 @@ h3 {
   position: relative;
   height: 573px;
   margin: 0 -48px 30px;
+  background: url(../img/videocontent-bg.jpg) center no-repeat;
   background-color: #878787;
 }
 @media (max-width: 992px) {
@@ -1794,8 +1795,8 @@ h3 {
   bottom: 0;
   z-index: 10;
   background-color: rgba(0, 0, 0, 0.1);
-  -webkit-backdrop-filter: blur(10px);
-          backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
   cursor: pointer;
 }
 .why-program__video-content::after {

assets/js/reviews.js

@@ -3,7 +3,10 @@ const whyProgramVideoContent = document.querySelector('.why-program__video-conte
 
 reviewsSlideVideos.forEach((videoEl) => {
   videoEl.addEventListener('click', (event) => {
-    if (whyProgramVideoContent) whyProgramVideoContent.classList.remove('active');
+    if (whyProgramVideoContent) {
+      whyProgramVideoContent.classList.remove('active');
+      whyProgramVideoContent.innerHTML = '';
+    }
     reviewsSlideVideos.forEach((video) => {
       if (video === event.currentTarget) {
         video.classList.add('active');
@@ -30,6 +33,20 @@ reviewsSlideVideos.forEach((videoEl) => {
 if (whyProgramVideoContent) {
   whyProgramVideoContent.addEventListener('click', (event) => {
     event.currentTarget.classList.add('active');
-    reviewsSlideVideos.forEach((video) => video.classList.remove('active'));
+    event.currentTarget.innerHTML = `
+          <iframe
+            width="560"
+            height="315"
+            src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin"
+            allowfullscreen
+          ></iframe>
+        `;
+    reviewsSlideVideos.forEach((video) => {
+      video.classList.remove('active');
+    });
   });
 }

assets/scss/_l-why-program.scss

@@ -48,6 +48,7 @@
       position: relative;
       height: 573px;
       margin: 0 -48px 30px;
+      background: url(../img/videocontent-bg.jpg) center no-repeat;
       background-color: $grey;
 
       @include laptop {
@@ -72,7 +73,7 @@
         bottom: 0;
         z-index: 10;
         background-color: rgba($color: #000000, $alpha: 0.1);
-        backdrop-filter: blur(10px);
+        backdrop-filter: blur(4px);
         cursor: pointer;
       }
 

index.html

@@ -850,16 +850,6 @@
 
           <div class="why-program__video">
             <div class="why-program__video-content">
-              <iframe
-                width="560"
-                height="315"
-                src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
-                title="YouTube video player"
-                frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                referrerpolicy="strict-origin-when-cross-origin"
-                allowfullscreen
-              ></iframe>
             </div>
             <div class="why-program__video-text">
               <b>