JSFiddle - React, Tailwind, and code Playground

HTML

<div class="html5-video-container">
    <video data-no-fullscreen="true" class="video-stream html5-main-video" style="width: 560px; height: 315px; left: 0px; top: -315px; transform: none;"></video>
    <div style="width: 560px; height: 315px; left: 0px; top: 0px;" class="html5-video-content"></div>
    <div aria-hidden="true" style="display: none;" class="html5-storyboard-framepreview"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="html5-storyboard-framepreview-img"></div>
        <canvas class="html5-video-loader html5-center-overlay ytp-scalable-icon-grow" aria-hidden="true" style="display: none; transform: scale(0.5);" height="60" width="60"></canvas>
        <div style="background-image: url(&quot;https://i.ytimg.com/vi/yp9P4U1PQcM/sddefault.jpg&quot;);" class="ytp-thumbnail html5-stop-propagation">
            <div style="transform: scale(0.875);" tabindex="5500" aria-label="Смотреть" role="button" class="ytp-large-play-button html5-center-overlay ytp-scalable-icon-shrink">
                <svg><path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg"...