jquery
//несколько видео подряд
(function(){
$(document).ready(function(){
$('.situation-item .vido-item-play').click(function(){
$(this).parent().children('.situation-item video').trigger('play');
$(this).parent().children('.situation-item video').addClass('active');
$(this).fadeOut();
$(this).parent().children('.situation-item .vido-item-pause').fadeIn();
});
$('.situation-item .vido-item-pause').click(function(){
$(this).parent().children('.situation-item video').trigger('pause');
$(this).parent().children('.situation-item video').removeClass('active');
$(this).fadeOut();
$(this).parent().children('.situation-item .vido-item-play').fadeIn();
return false;
});
});
})();
//несколько видео подряд
HTML
<div class="video-item">
<div class="title-block">Видео 1</div>
<div class="miniature">
<div class="vido-item-play"></div>
<div class="vido-item-pause"></div>
<video src="https://danilsmg.ru/wp-content/uploads/2022/11/danilsmg.ru_-_showreel-1080p.mp4"></video>
<img src="https://krot.info/uploads/posts/2020-02/1580829035_9-p-kadri-iz-filma-boitsovskii-klub-10.jpg" alt="">
</div>
</div>
LESS
.video-item{
.miniature{
height: 300px;
margin-bottom: 30px;
position: relative;
cursor: pointer;
@media(max-width: 1600px){
height: 200px;
}
@media(max-width: 1120px){
height: 150px;
}
.vido-item-pause,
.vido-item-play{
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
background: @color-1 url('../img/btn-play-white.svg') no-repeat 60% 50%;
background-size: 20px;
border-radius: 50%;
z-index: 2;
transition: 0.3s all;
}
.vido-item-pause{
left: auto;
top: auto;
right: 20px;
top: 20px;
margin: 0;
background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='butt' stroke-linejoin='arcs'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e ") no-repeat 50% 50%;
background-size: 30px;
z-index: 3;
display: none;
}
video{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0;
transition: 0.3s all;
}
.active{
opacity: 1;
}
}
}