I got this problem for almost 1 week without any solution working. I have an ReactApp use iframe tag to play youtube video. The request is to click another tag (such as thumbnail) then video will be played instead of clicking directly to iframe.

Thumbnail have z-index = 2; iframe z-index = 1. When click thumbnail, thumnail will be hidden (display=none).

I can do this by add '?autoplay=1&mute=1' to youtube embed url when click the thumbnail. This works well on desktop. BUT Because youtube not allow autoplay on mobile/tablet so user must click twice for video to play, first click on thumbnail, the next click on iframe.

Is there a way so that use can only click once on thumbnail then theo video will auto play?

My website have different domain with youtube so any way like accessing element inside iframe are not allowed.

This task should be completed with only vanilla javascript/typescript only. We don't prefer using third party like react-player because these player will impact app performance.

Below is codes similar to the real project. I would appreciate to any advice as I am really exhausted with this :)))

<div id="container">

        <div id="thumbnail"></div>

        <iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg?autoplay=1&mute=1" title="Dummy Video For YouTube API Test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>