Youtube iframe - 'fullscreen is unavailable'

Question

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>

Answer 1

Depending on which browser you are using you may need alternative settings turned on iframe see: YouTube iframe embed - full screen for in depth answer

Answer 2

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!