Speed issue with Video Cover Background

Hello,

I have this strange issue with video cover background. My site have on homepage a video cover, for testing I used a compressed 30sec video loop, selfhosted, for production, I need to use a 30sec video stream in hd.

But, when I use a video stream, same video but in hd, from Vimeo (..the plan is to use a video stream service supplied by cloudflare), the performance drop down.

Some example on gtmetrix:

1) Website using grav and spectre css, with 582kb video selfhosted
Fully Loaded Time 1.1s
Total Page Size 1.35MB
PageSpeed Score (91%)
YSlow Score (88%)

2) Same website, (with less pictures, but same structure/menu/section) but in plain html/spectre.css, same video selfhosted
Fully Loaded Time 0.6s
Total Page Size 524KB (less the size of video?? some issue in gtmetrix..)
PageSpeed Score (98%)
YSlow Score (97%)

3) Website using grav and spectre css, with video stream from Vimeo:
Fully Loaded Time 22.2s
Total Page Size 13.3MB
PageSpeed Score (83%)
YSlow Score (86%)

4) Same website, (with less pictures, but same structure/menu/section) but in plain html/spectre.css with video stream from Vimeo:
Fully Loaded Time 1.3s
Total Page Size 11.5MB
PageSpeed Score (89%)
YSlow Score (96%)

.... 22.2 sec respect 1.3???

twig for Vimeo streaming:

<div class="showcase">
    <div class="video-responsive">
        <iframe src="https://player.vimeo.com/video/XXXXXXXXX?background=1&autoplay=1&loop=1&byline=0&title=0&muted=1"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="showcase-overlay">
        <div class="container grid-xl">
            <div class="center-showcase-content">
                <div class="p-2" data-aos="fade-up">
                    <h1 class="text-uppercase">{{ page.title}}</h1>
                    <p>{{ page.content }}</p>
                </div> 
            </div>
        </div>
    </div>
</div id="down">

twig for selfhosted video:

<div class="showcase">

<video playsinline autoplay muted loop id="video_cover" poster="{{ page.media['cover-poster.jpg'].url }}">
   <source src="{{ page.media['cover.mp4'].url }}" type="video/mp4">
</video>

<div class="showcase-overlay">
    <div class="container grid-xl">
        <div class="center-showcase-content">
            <div class="p-2" data-aos="fade-up">
                <h1 class="text-uppercase">{{ page.title}}</h1>
                <p>{{ page.content }}</p>
            </div> 
        </div>
    </div>
</div>

</div id="down">

css and class are almost the same in grav version or in plain html version.
On grav installation I use owl carousel plugin, fb customer chat, cookieconsent plugin, can be here the problem? some conflicts?

Some suggestion?

thanks