Code for video autoplay

Technical Q&A
, ,
1

Hey Guys,

I have made some code which allows me to have a video looping with no volume and no sound which works perfectly fine on Android but on some iPhone you can see the circled play button which you can’t press and video isn’t working.

Do you guys have any idea where I went wrong please?

Here is my code:

<head>
    <!-- Link to Montserrat font from Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
</head>

<style>
/* General reset for mobile responsiveness */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Video styles */
video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
}

/* Container styles */
.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Text styles */
.video-text {
    position: relative;
    color: white;
    font-size: 2.5rem; /* Increased default size */
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    z-index: 2;
    padding: 1rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Scale text size for larger screens */
@media (min-width: 768px) {
    .video-text {
        font-size: 3.5rem; /* Slightly larger for tablets */
    }
}

@media (min-width: 1200px) {
    .video-text {
        font-size: 4.5rem; /* Larger for desktops */
    }
}

/* Button styles */
.discover-button {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    background: none;
    border: 2px solid white;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.discover-button:hover {
    background-color: white;
    color: black;
}

/* Ensure mobile compatibility for buttons */
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
</style>

<div class="video-container">
    <!-- Video -->
    <video muted autoplay playsinline loop preload="auto" poster="https://via.placeholder.com/1920x1080">
        <source src="https://cdn.shopify.com/videos/c/o/v/f1e168ddf8e741929e6687143785f603.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <!-- Centered Text -->
    <div class="video-text">
        <span>ENHANCE YOUR BRAND</span>
        <button class="discover-button" onclick="scrollToDiscover()">DISCOVER</button>
    </div>
</div>

<!-- JavaScript for Smooth Scrolling and Autoplay Fix -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const video = document.querySelector('video');
        if (video) {
            // Ensure video is muted and attempt to play
            video.muted = true; // Required for autoplay on iOS
            video.play().catch(err => console.warn('Autoplay failed:', err));
        }
    });

    function scrollToDiscover() {
        const discoverSection = document.querySelector('#discover-section');
        if (discoverSection) {
            discoverSection.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    }
</script>

Thanks,

Elliot

2

@Elliot01250
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

3

Hey @KetanKumar ,

I’ve managed to sort it out but if you want to have a look feel free. There might be things I can improve on.

It’s still a work in progress. sitenest.co.uk

Thanks,

Elliot

4

@Elliot01250 that would be great

yes i can see its work