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>

Answer 1

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 :)

Answer 2

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'
/>

Answer 3

This solved it for me

If you are using <video> in react

• Use autoPlay instead of autoplay for react.
• Also add muted

<video autoPlay muted src="/vid.mp4" />

if you want to use the autoplay with small letters, you should assign the value autoplay="true"