JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images_holder">
<div class="images_while">

<div class="youtube">
<lite-youtube videoid="HnGXJKmUfE8" style="background-image: url(&quot;https://i.ytimg.com/vi/HnGXJKmUfE8/hqdefault.jpg&quot;);"><div class="lty-playbtn"></div><div class="lty-playbtn"></div></lite-youtube>
</div>

<div class="inl">
<a href="https://nexpro.ru/wp-content/uploads/2019/08/2-133.jpg"><span itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject"><img itemprop="url image" class="aligncenter size-full wp-image-98497" src="https://nexpro.ru/wp-content/uploads/2019/08/2-133.jpg" alt="" width="620" height="349" srcset="https://nexpro.ru/wp-content/uploads/2019/08/2-133.jpg 620w, https://nexpro.ru/wp-content/uploads/2019/08/2-133-300x169.jpg 300w" sizes="(max-width: 620px) 100vw, 620px"><meta itemprop="width" content="620"><meta itemprop="height" content="349"></span></a>
</div>

<div class="inl">
<a href="https://nexpro.ru/wp-content/uploads/2019/08/3-132.jpg"><span itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject"><img itemprop="url image" class="aligncenter size-full wp-image-98498" src="https://nexpro.ru/wp-content/uploads/2019/08/3-132.jpg" alt="" width="620" height="349" srcset="https://nexpro.ru/wp-content/uploads/2019/08/3-132.jpg 620w, https://nexpro.ru/wp-content/uploads/2019/08/3-132-300x169.jpg 300w" sizes="(max-width: 620px) 100vw, 620px"><meta itemprop="width" content="620"><meta itemprop="height" content="349"></span></a>
</div>

<div class="inl">
<a href="https://nexpro.ru/wp-content/uploads/2019/08/4-133.jpg"><span itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject"><img itemprop="url image" class="aligncenter size-full wp-image-98499" src="https://nexpro.ru/wp-content/uploads/2019/08/4-133.jpg" alt="" width="620" height="349" srcset="https://nexpro.ru/wp-content/uploads/2019/08/4-133.jpg 620w, https://nexpro.ru/wp-content/uploads/2019/08/4-133-300x169.jpg 300w" sizes="(max-width: 620px) 100vw, 620px"><meta...

CSS

.images_holder {
    overflow-x: scroll;
    position: relative;
    height: auto;
    width: 100%;
    margin-bottom: 20px;
}
.images_while {
    width: auto;
    white-space: nowrap;
}

.inl {
    pointer-events: none;
    display: inline-block;
    margin-right: 10px;
    max-width: 87%;
}


lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19...