Currently, I am working on a small Russian project and facing some challenges with the mobile version of my website: php8098.github.io/breakfast.
The issue lies within the first slider where the play button should trigger a modal window to open. I urgently need assistance in fixing this bug before tomorrow, and I apologize if my question seems somewhat trivial.
Below is the jQuery code snippet:
$('.button-play-1').on("click", function(){
$('.video-popup-1').show()
});
$('.close-1').on("click", function(){
$('.video-popup').hide()
});
Here's the corresponding HTML:
<div class="feedback-slider">
<div class="feedback-slide feedback-slide-1">
<button class="button-play button-play-1">
<img src="img/play.png" alt="">
</button>
</div>
<div class="feedback-slide feedback-slide-2">
<button class="button-play button-play-2">
<img src="img/play.png" alt="">
</button>
</div>
... (remaining feedback-slide elements)
</div>
<div class="video-popup video-popup-1">
<div class="popup">
<iframe width="380" height="403" src="https://www.youtube.com/embed/B3DP2rwQmpI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="close close-1">
<img src="img/close.png" alt=""></div>
</div>
</div>
CSS styles used for the video popup:
.video-popup {
position: fixed;
display: none;
top: 0;
width: 100%;
height: 100%;
z-index: 8;
background-color: rgba(0, 0, 0, 0.8);
}
.popup {
position: fixed;
left: 50%;
top: 7%;
width: 420px;
height: 550px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: #fff;
border-radius: 10px;
}
.popup iframe {
margin-left: 20px;
margin-top: 70px;
}
.close {
position: absolute;
right: -10px;
top: -15px;
font-size: 35px;
color: #000;
font-weight: 300;
cursor: pointer;
width: 36px;
height: 36px;
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
background-color: #ffffff;
text-align: center;
line-height: 30px;
border-radius: 50%;
}