HTML
<?php if( have_rows('видео') ): ?>
<div class="video" id="video">
<div class="container">
<div class="content-title"><?php the_field('заголовок_блока_видео'); ?></div>
<div class="flex_block">
<?php while( have_rows('видео') ): the_row(); ?>
<a class="three-item miniature" href="<?php the_sub_field('ссылка_видео_youtube'); ?>" data-rel="lightbox-video">
<span class="play-btn"></span>
<?php
$image = get_sub_field('изображение');
if( !empty($image) ): ?>
<img src="<?php echo $image['sizes']['medium_large']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</a>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
LESS
.video{
padding-top: 120px;
padding-bottom: 90px;
@media(max-width: 800px){
padding-top: 80px;
padding-bottom: 50px;
}
.miniature{
display: block;
text-decoration: none;
height: 250px;
position: relative;
overflow: hidden;
.play-btn{
position: absolute;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -30px;
width: 60px;
height: 60px;
background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3e%3cpolygon points='5 3 19 12 5 21 5 3'%3e%3c/polygon%3e%3c/svg%3e") no-repeat 57% 50%;
border-radius: 50%;
z-index: 2;
transition: 0.3s all;
}
img{
transition: 0.3s all;
}
&:hover{
.play-btn{
background-color: @text;
}
img{
transform: scale(1.1);
}
}
}
}