'What's the easiest way to play youtube video in <video>tag in React

I am trying to play youtube video in html5 tag but I am getting some error

<div className={classes.VideoContainer}>
    <video
      className={classes.movieInfo__trailer}
      src="https://www.youtube.com/watch?v=V3hy2aLQFrI"
      type="video/mp4"
      autoPlay
      controls
    ></video>
  </div>

I am getting "No video with supported format and MIME type found" error

htmlreactjs


Solution 1:[1]

Yoy can try to use iframe instead of the video

from

   <div className={classes.VideoContainer}>
        <video
          className={classes.movieInfo__trailer}
          src="https://www.youtube.com/watch?v=V3hy2aLQFrI"
          type="video/mp4"
          autoPlay
          controls
        ></video>
      </div>

to

  <div className={classes.VideoContainer}>
       <iframe
          width="560"
          height="400"
          className={classes.movieInfo__trailer}
          src="https://www.youtube.com/watch?v=V3hy2aLQFrI"
          type="video/mp4"
          autoPlay
          controls
        ></iframe>
      </div>

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 DeveloperInSky

Related Questions