feat: added dinamic addition of videos to dom

assets/css/index.css

@@ -1313,7 +1313,7 @@ h3 {
   margin: 0 0 15px;
   overflow: hidden;
   border-radius: 10px 40px;
-  background-color: #609eff;
+  background-color: #4d4d4d;
 }
 @media (max-width: 992px) {
   .reviews__slide-video {

assets/js/reviews.js

@@ -7,8 +7,21 @@ reviewsSlideVideos.forEach((videoEl) => {
     reviewsSlideVideos.forEach((video) => {
       if (video === event.currentTarget) {
         video.classList.add('active');
+        video.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>
+        `;
       } else {
         video.classList.remove('active');
+        video.innerHTML = '';
       }
     });
   });

assets/scss/_l-reviews.scss

@@ -36,7 +36,7 @@
       margin: 0 0 15px;
       overflow: hidden;
       border-radius: 10px 40px;
-      background-color: $blue;
+      background-color: $darkgrey;
 
       @include laptop {
         height: 160px;

index.html

@@ -337,16 +337,7 @@
                 <div class="swiper-slide">
                   <div class="reviews__slide">
                     <div class="reviews__slide-video">
-                      <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="reviews__slide-name">Иван, 27 лет</div>
                     <div class="reviews__slide-text">
@@ -359,16 +350,6 @@
                 <div class="swiper-slide">
                   <div class="reviews__slide">
                     <div class="reviews__slide-video">
-                      <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="reviews__slide-name">Иван, 27 лет</div>
                     <div class="reviews__slide-text">
@@ -381,16 +362,7 @@
                 <div class="swiper-slide">
                   <div class="reviews__slide">
                     <div class="reviews__slide-video">
-                      <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="reviews__slide-name">Иван, 27 лет</div>
                     <div class="reviews__slide-text">
@@ -403,16 +375,7 @@
                 <div class="swiper-slide">
                   <div class="reviews__slide">
                     <div class="reviews__slide-video">
-                      <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="reviews__slide-name">Иван, 27 лет</div>
                     <div class="reviews__slide-text">
@@ -425,16 +388,7 @@
                 <div class="swiper-slide">
                   <div class="reviews__slide">
                     <div class="reviews__slide-video">
-                      <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="reviews__slide-name">Иван, 27 лет</div>
                     <div class="reviews__slide-text">
@@ -447,16 +401,7 @@
                 <div class="swiper-slide">
                   <div class="reviews__slide">
                     <div class="reviews__slide-video">
-                      <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="reviews__slide-name">Иван, 27 лет</div>
                     <div class="reviews__slide-text">
@@ -469,16 +414,7 @@
                 <div class="swiper-slide">
                   <div class="reviews__slide">
                     <div class="reviews__slide-video">
-                      <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="reviews__slide-name">Иван, 27 лет</div>
                     <div class="reviews__slide-text">