Problems when using multiple videos

[ardacarofficial]

<section class="container video">
        <div class="video-entrance">
          <div class="video-entrance-px">
            <div id="video-one" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
        </div>
        <div class="video-smalls">
          <div class="video-smalls-px">
            <div id="vidoe-two" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
          <div class="video-smalls-px">
            <div id="vidoe-three" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
          <div class="video-smalls-px">
            <div id="vidoe-four" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
          <div class="video-smalls-px">
            <div id="vidoe-five" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
        </div>
        <div class="video-verticals">
          <div class="video-verticals-px">
            <div id="vidoe-six" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
          <div class="video-verticals-px">
            <div id="vidoe-seven" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
          <div class="video-verticals-px">
            <div id="vidoe-eight" data-plyr-provider="vimeo" data-plyr-embed-id="x"></div>
          </div>
        </div>
</section>

.video {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 20px 0;
    gap: 20px;
}

.video-entrance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.video-entrance-px {
    width: 700px;
    cursor: pointer;
}

.video-smalls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.video-smalls-px {
    width: 260px;
    cursor: pointer;
}

.video-verticals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.video-verticals-px {
    width: 300px;
    cursor: pointer;
}

When my codes above bring the videos side by side and give a certain width, the vimeo tools in the video appear. So the library is not stable.

Also, when responsive, the videos do not listen to the CSS codes I wrote, they are positioned according to their own heads.

Take any Vimeo video id and try the code above, you will see many problems such as responsive errors, video start button not working stably, Vimeo elements appearing in some places.

If this library is coded to use 1 video, there is no problem, but if it is coded to use more than one video, it seems more logical to use iframe, at least I can make videos responsive.