'Make YouTube video autoplay using React

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>
javascripthtmlcssreactjsyoutube


Solution 1:[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:[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 :)

Solution 3:[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"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user5214530
Solution 2
Solution 3 Abraham

Related Questions