Youtube lazy load play on click for mobile

Hi All, I have setup my vue template so when a user clicks the image it then loads the youtube iframe and then auto-plays the video. I did this because all of the Vue youtube plugins were set up so that a user would have to click the image and then click again to play the video. The problem I am having is that on mobile OS it doesn't autoplay when the user clicks the image. Works on desktop. Here is my code:

<template>
    <div class="relative w-full pb-[56.25%]">
        <iframe 
            v-if="defer"
            class="w-full absolute top-0 left-0 h-full rounded-lg" 
            :src="defer"
            :data-src="url"
            title="YouTube video player" 
            frameborder="0" 
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
            allowfullscreen />
        <div
            @click="loadYoutube"
            class="w-full absolute top-0 left-0 h-full rounded-lg cursor-pointer" 
            v-else>
            <img 
                class="w-full h-full object-cover" 
                :src="`https://img.youtube.com/vi/${src}/sddefault.jpg`" 
                alt="">
        </div>
    </div>
</template>

<script>
    export default {
        props: ['src', 'alt'],
        data() {
            return {
                valid: false,
                url: `https://www.youtube.com/embed/${this.src}`,
                defer:'',
            }
        },
        methods: {
            loadYoutube() {
                this.defer = `${this.url}?autoplay=1`
            }
        },
    }
</script>