Vimeo video loading issue on safari for Mac

Design help Custom code
1

Hi, it’s my first post after signing up.
Nice to meet you.

I’m worried about the problem on my site, so I’m asking for advice.

I’ve solved all the problems that I see on Android, I see on Chrome, and I even see on Safari for iPhone… The problem is that the video disappears after loading for about 0.1 seconds on the Safari browser for Mac.

Is there a good solution? Please!

You can check the problem on the website below.

Here is my site Read-Only: [LINK]
Just in case, I’ll put up the source code.

<style>
    .iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* Set to 16:9 aspect ratio */
        border-radius: 20pt; /* Initial border radius value */
        overflow: hidden;
        background-color: #B9BABC; /* Background color before loading */
    }

    @media (max-width: 480px) {
        .iframe-container {
            border-radius: 10pt; /* Border radius value for screens below 480px */
        }
    }

    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit; /* Inherit border radius value from parent */
    }

    #preloader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #B9BABC 0%, #FFFFFF 50%, #B9BABC 100%);
        background-size: 300% 300%;
        animation: gradientAnimation 0.7s ease-in-out infinite;
    }

    @keyframes gradientAnimation {
        0% {
            background-position: 0% 50%;
        }
        100% {
            background-position: 100% 50%;
        }
    }
</style>

<div class="iframe-container">
    <div id="preloader"></div>
    <iframe id="video-iframe" src="https://player.vimeo.com/video/341332753?background=1&muted=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

<script>
    // When the page is loaded, update the styles
    window.addEventListener('load', function() {
        var preloader = document.getElementById('preloader');
        var iframe = document.getElementById('video-iframe');
        
        // Hide the preloader once the page is loaded
        preloader.style.display = 'none';
        
        // Perform additional tasks after the video is loaded
        iframe.addEventListener('load', function() {
            // Additional tasks
        });
    });
</script>
2

I don’t know what the cause is, but it works fine after some time.
I’m trying to trace the reason. Thank you for checking it out.
Thank you! :yum:

3

Hello, I know this is an old topic, but I just experienced the same issue and I found the solution.

The Vimeo video integrated on one of my clients website didn’t show on Safari (Mac and iPhone). I could just see it during 0.1 seconds (if I was fast enough!) and then all was left was a blank space.

I replaced the iframe code shared by Vimeo by the following code:

<div id="vimeo-player"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var options = {
        id: 000000000, // replace with your own video ID
        width: 640
    };
    var player = new Vimeo.Player('vimeo-player', options);
</script>

Now the video displays correctly on every browser. Hope it can help someone!