How to autoplay embedded you tube videos in react app?

Question

I have followed several suggestions for making the youtube video autoplay, but couldn't do it. My codes are as follows:

1st Try (The raw embedded code acquired directly from youtube):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<iframe className='w-full md:h-[550px] h-[300px] rounded-lg' src="https://www.youtube.com/embed/wkTFd3QZSP0" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

2nd Try (using 'autoPlay' instead of 'autoplay' and also using 'muted'):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<iframe className='w-full md:h-[550px] h-[300px] rounded-lg' src="https://www.youtube.com/embed/wkTFd3QZSP0" title="YouTube video player" frameBorder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" autoPlay muted allowFullScreen></iframe>

I've also tried 'react-player'; unfortunately, none of this worked.

Answer 1

you need to add query parameter after YouTube video link.

autoplay don't play without mute.

You can follow.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ycDeZBYy074?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>