问题
So I searched quite some time for an answer to that now, but so far was not able to find any. This is my first time really looking into HTML5 video questions, so please forgive me if my question is totally stupid.
I read quite a few things about this awesome video tag and how it works. However, I only find the info that the controls parameter enables the whole control bar or not, and then it seems to be up to the browser, which controls exactly are shown.
To make even more clear what I am talking about, in Chrome, the full screen Button looks like this:
I found this example here: http://www.w3schools.com/html/html5_video.asp
And as you can (probably) see, the button is there, when you open this site. However, as soon as you click the "Try it yourself" button right below it, the full screen button is not shown anymore, and that is, despite the code seems to be basically the same.
I understand that this is inherent to the browser how it handles it. However, the behaviour is exactly the same in at least Firefox, so I am wondering: What is the logic behind this? Is there any way to "trick" the browser into allowing the fullscreen button?
Some points that I (I think) have already ruled out as the source of the problem:
- The actual size of the video being larger than the player
- Some CSS tricks like setting the width to a specific value and max-width to 100%
Any ideas?
回答1:
That is because the video in your second example is inside an iframe, which is quite restrictive as to how you can manipulate the content inside of it.
I imagine adding the allowfullscreen attribute to an iframe would show a different result r.e. video controls.
来源：https://stackoverflow.com/questions/35366331/how-does-the-browser-determine-whether-a-full-screen-button-is-shown-or-not-for