Good-Production
/
triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added dinamic addition of videos to dom

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent e51337ed63
commit 2f3396d8b3
4 changed files with 21 additions and 72 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      assets/css/index.css
  2. 13
      assets/js/reviews.js
  3. 2
      assets/scss/_l-reviews.scss
  4. 76
      index.html

2
assets/css/index.css
Unescape View File

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

13
assets/js/reviews.js
Unescape View File

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

2
assets/scss/_l-reviews.scss
Unescape View File

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

76
index.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save