If you’ve ever worked with HTML5 video then you have probably wondered how you get a bunch of control buttons when you’ve only added a single <video> tag to your page. Recently, I get a problem that the fullscreen button on the video play is missing or greyed out if I put the video inside a IFRAME. What happened?

With fullscreen button: {% raw %}

{% endraw %}

No fullscreen button: {% raw %}

{% endraw %}

Reason

Here is the code I used to embed the video in bad sample:

<iframe src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/video$samples/Simple_video_example?revision=1444820" height="370" width="640" id="frame_Simple_video_example" frameborder="0"></iframe>

The story is, by default, only top-level documents and their same-origin child frames can request and enter fullscreen mode. Therefore, if a IFRAME source origin is different from the parent page, the browser would prevent that IFRAME from using fullscreen mode.

Workaround

To workaround this, you can:

<iframe src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/video$samples/Simple_video_example?revision=1444820" height="370" width="640" id="frame_Simple_video_example" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

Reference: