CODEWITHSUNDEEP
htmlvideohtml5-video
RGriffiths
RGriffiths

Reputation: 5970

HTML 5 Video tag not showing fullscreen button

I am trying to get a video with the video tag to include a fullscreen option in the controls. If I insert a video into a site using the following:

<video controls>
    <source src="filename.mp4 " type="video/mp4">
</video>

I do not get the full screen button.

enter image description here

Interestingly when you look at w3schools the example on the page shows the fullscreen but when you click the Try me it does not.

enter image description here

Could it be because the tag is inside an frame? Is there a way around this?

Upvotes: 1

Views: 3516

Answers (1)

VC.One
VC.One

Reputation: 15916

"Could it be because the tag is inside an frame? Is there a way around this?"

Yes that seems to be the cause after some investigation. Putting a <video> tag inside an <iframe> will cause the fullscreen button to disappear in Firefox.

Regarding W3Schools...

  • The first page creates an actual video tag (see line 1143 of source code).

  • On the second "Try it yourself" page they're actually creating an iframe (see line 541 of "Try it" page's source code): var ifr = document.createElement("iframe"); etc.

Solution:
In the iframe code, add allowfullscreen, webkitallowfullscreenand mozallowfullscreen.

If using an <iframe> to load another HTML page (which holds the shown <video> code) then try:

<!DOCTYPE html>
<html>
<body>

<iframe width="800" height="600" src="video_page.html" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe>

</body>

PS:

"If I insert a video into a site using the following... [see posted code]"

Your posted code works fine. A <video> tag in a web page should have fullscreen controls. The problem you describe only shows up when using <iframe>.

Upvotes: 3

Related Questions