Thursday 28.12.2017 10:37:13, Jakuje
What is Fullscreen API?
The fullscreen API in HTML5 is very useful to show either video or other objects to users. But it is still very inconsistent across browsers. I do not plan to go into details as it is already done on many other pages, such as Mozilla Developer Network, which is very good resource. But it talks about fullscreening video objects, which does not affect the other objects in all cases. The good idea is to settle down with some fullscreen framework, such as screenful.js, which is making it very simple again.
Showing PDF in website
The easiest way to show PDF to the user of website is to use the <object> HTML tag. It is very convenient for desktop users, but it usually does not work with mobile clients so do not forget to provide also a link to download the PDF itself to stay accessible!
The Chrome twist!
Combining things together works fine in other browsers, but not in Chrome/Chromium. The object goes fullscreen, but does not extend to the full width of screen. None of the advised hints of adding CSS height:100%; to the fullscreen element seems to work (though it is crucial). So what next? We want the same cross-browser experience! See the first example page that demonstrates the problem in Chrome.
We need to go deeper
Fortunately, the fullscreen does not have to be applied to the object element, but it works generally with anything. Enclosing the object tag with div and calling fullscreen on it seems to do the trick in Chrome. But it has problems in other browsers so we need to detect a browser and do whatever it likes. See the second example page, which should already work even in chrome.
Update 2018:
Last year, I believe the same trick as I used in Chrome worked also in Firefox, but it does not work anymore and we need to detect a browser and based on that select, which element to fullscreen (in Firefox the object itself, in Chrome the parent).