Youtube iframe - 'fullscreen is unavailable'

Viewed 1860

I am using iframe to play youtube video. It display full screen icon but on click it says 'fullscreen is unavailable'. I am using allfullscreen still it is not working. Below is the code I have tried so far.

Code 1.

<iframe width="760" height="415" id={showVid.id} title={showVid.title} src={showVid.link} allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

Code 2.

<iframe width="760" height="415" id={showVid.id} title={showVid.title} src={showVid.link} allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture fullscreen"></iframe>
3 Answers

Make sure you are using https in the src attribute for youtube, e.g.

<iframe allow="fullscreen;" src="https://www.youtube.com/embed/{video.id}"></iframe>

I was developing locally using a "//www.youtube.com" link and fullscreen would never work for me!

iframe{
 width : 100%
}
then using javascript api set the zoom attribute to zoom = 1;

Related