Embedding a Vimeo video

A good day you all,

I have a little bit of an issue with embedding a Vimeo video. I use the following code:

<?php

$vimeo_url = get_theme_mod('vimeo_video_url');

if ($vimeo_url) { ?>

<div id="frontpageVideo" class="h-80">

    <div class="relative top-0 left-0 w-full md:h-screen md:w-full border-b-4 border-blue-400">

        <video

            class="z-10 inset-0 w-full md:h-screen object-contain md:object-cover object-center"

            autoplay

            playsinline

            loop

            muted

        >

            <source src="<?php echo $vimeo_url; ?>">

            <source src="<?php echo $vimeo_url; ?>" type="video/ogg">

            <!-- <source src="https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4" type="video/mp4"> -->

            Your browser does not support the video tag.

        </video>

    </div>

</div>

<?php } ?>

As you can see, in the comments, there is a mixkit.co video and that works fine. But the problem is that, as soon as I try to play the Vimeo url, there are no errors at all but no video either.

The Vimeo settings are ok according to me and the returned (echo) url seems ok:

<video class="z-10 inset-0 w-full md:h-screen object-contain md:object-cover object-center" autoplay="" playsinline="" loop="" muted="">
            <source src="https://player.vimeo.com/video/884859103">
            <source src="https://player.vimeo.com/video/884859103" type="video/ogg">
            <!-- <source src="https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4" type="video/mp4"> -->
            Your browser does not support the video tag.
        </video>

Can anyone please point out what I’m doing wrong?

Thank you all for your help,

kind regards,

24