Make YouTube video autoplay using React

Question

I am trying to make my video autoplay using react. adding autoplay=1 as a parameter doesn't work. Any suggestions?`

Here is my code.

<div
  className="video mt-5"
  style={{
         position: "relative",
         paddingBottom: "56.25%" /* 16:9 */,
         paddingTop: 25,
         height: 0
       }}
>
    <iframe
       style={{
             position: "absolute",
             top: 0,
             left: 0,
             width: "100%",
             height: "100%"
             }}
        src={'https://www.youtube.com/embed/hEnr6Ewpu_U?'}
        frameBorder="0"
    />
</div>

Solution 1

According to 2018 changes in youtube policies, they've omitted option to autoplay videos with sound. If you want to autoplay it muted, there's still an option to do it with an iframe:

<iframe src='https://www.youtube.com/embed/hEnr6Ewpu_U?autoplay=1&mute=1'
        frameBorder='0'
        allow='autoplay; encrypted-media'
        allowFullScreen
        title='video'
/>

Solution 2

I wouldn't use <iframe> cuz when you go to Youtube you still have to click to play. I would use a library called react-player

import ReactPlayer from "react-player";

<ReactPlayer
  url={props.url}
  playing={true}
  width={props.width}
  height={props.height}
/>

And it will autoplay :)

Comments

[Nawin]

playing true is not get you autoplay but if you add muted true this will work perfectly Ref:theverge.com/2018/3/22/17150870/…

[Mars2024]

Regular HTML to get Autoplay to work was not working for my React project, but using ReactPlayer did it!!