Can I have my YouTube video play immediately after thumbnail image is clicked?

At the moment I have the following code below which displays a thumbnail image and then when the thumbnail is clicked it loads the YouTube player – this was done in order to make the page load quicker initially.

My goal is to load the YouTube player and start playing the video when the image thumbnail is clicked – as at the moment the user has to click on the thumbnail then once again click play on the YouTube player that is made visible. 

Below you can see how this work as of now in a video player:

https://share.zight.com/E0umXj2X

Below you can find the code I am using to generate this thumbnail:

@php
    $videoId = '';
    if (preg_match('/v=([^&]+)/', $vlesson->video_url, $matches)) {
        $videoId = $matches[1];
    }
    // Use the static thumbnail URL you provided
    $video_thumb = '/images/play_button_thumbnail.jpg';
@endphp

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
        src="https://www.youtube.com/embed/{{ $videoId }}?autoplay=1"
        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='https://www.youtube.com/embed/{{ $videoId }}?autoplay=1'><img src='{{ $video_thumb }}' alt='Video'><span>▶</span></a>"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
        title="{{ $vlesson->title ?? 'YouTube Video' }}">  {{-- Assuming you might have a title field in vlesson --}}
    </iframe>
</div>

@else

Please note this is a Blade file.

If anyone has any input on how I can make it 1 click thumbnail to play it would be so greatly appreciated!

Thank you!