'full screen not working when playing video with iframe

I want to allow fullScreen video in iframe player. you can see my code here.

  function App() {
   return (
    <div className="App">
      <iframe
        height={"315px"}
        allowfullscreen
        webkitallowfullscreen
        mozallowfullscreen
        oallowfullscreen
        msallowfullscreen
        width={"560px"}
        src={`https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4`}
      />
    </div>
  );
}
htmlreactjsiframehtml5-video


Solution 1:[1]

allowFullScreen - if set, applies the allowFullScreen param (deprecated in HTML5). If set, adds allow="fullscreen".

Solution 2:[2]

You can use this Code to display Your Video in Fullscreen.

<iframe src={video} allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" height="500px" width="800px"></iframe>

And btw don't mind the way I specified video url you can use whatever suits your needs.

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 vijay kasar
Solution 2 Paul Williams

Related Questions