Vimeo video loading issue on safari for Mac

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>

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: