How to Make Your Webflow Videos Autoplay in Safari

Background videos can add a dynamic touch to website design, but if not carefully implemented, they can downgrade the experience for your visitors—and even drive them away from your site! Join Alex as he reveals a clever hack to guarantee your Webflow website's background video auto-plays flawlessly on Safari browsers. With this simple trick, say goodbye to autoplay inconsistencies across browsers and impress your users with a seamless UX every single time!

Here’s how you can do it in just a few steps:

Step #1: Identify your video URL in your Webflow project or any other source

Step #2: Use this custom code in an embed box

<div id="video-container">
</div>
<video id="video" autoplay="autoplay" muted="muted" loop="loop" playsinline>
    <source src="https://s3.amazonaws.com/webflow-prod-assets/65f2d2ba98fbff9c6edd3327/65f2d34853db1ea40a3a7eae_Portugal%20V.mp4" type="video/mp4">
</video>

<style>
    video {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -4;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #video-container {
        height: 100%;
        width: 100%;
        background-image: url("https://s3.amazonaws.com/webflow-prod-assets/65f2d2ba98fbff9c6edd3327/65f2d34853db1ea40a3a7eae_Portugal%20V.mp4");
        background-color: transparent;
        position: relative;
        z-index: -3;
        top: 0;
        left: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

Step #3: Replace the links with your video link and make sure you have autoplay activated

Step #4: Adjust the CSS inside the code according to your amazing design

Step #5: Hide your Webflow background video element

💡 Pro Tip: Stay hydrated and take a moment to admire your work! You’ve just added a beautiful custom background video like a pro.