JW Player provides extensive fullscreen capabilities to give your audience an immersive video experience and help increase video engagement! Built-in fullscreen is supported on all browsers except Safari on iOS. The fullscreen API is available on all browsers, except Safari on iOS as well as the Android Stock Browser.
To learn more about the fullscreen features, check out the report on the developer site.
Also check out here to see all our player’s branding and UI features. If you have more questions, please reference our developer site and support site.
One of the killer features for HTML5 video is native browser fullscreen support. Without it, a viewer watching video through HTML5 is limited to seeing the video within the browser window, which is clearly not an immersive experience. In our latest State of HTML5 Video report, we reported that 50% of the browsers people are using now support fullscreen features natively. Some sites you probably currently use (Facebook, for one, in their image galleries) are already using the native browser fullscreen APIs. Here at LongTail, we are bringing this functionality into the next version of the JW Player, but in the meantime, I’ll walk you through the new feature, and show you how easy it is to implement.
What is Native Fullscreen Anyway?
Native fullscreen means that the browser uses your entire monitor to display content. This means that no other windows are visible, and the browser’s menu, tabs, and other elements go away. Compare these two screenshots:
Step 0: Use a Fullscreen Enabled Browser
None of this new functionality will work if your browser doesn’t support it. Currently only Google Chrome version 15+, Firefox 10+ and Safari 5.1+ support fullscreen mode. Make sure you have the latest versions of those browsers for these examples to work!
Upcoming versions of the major browsers will all include fullsceen support in some form. Internet Explorer 10 (currently in beta) will provide support, and Opera (who were involved in writing the fullscreen draft spec) are likely not far behind.
Step 1: Decide What to Fullscreen
First, you’ll need to create a bit of HTML, and decide what element to blow up to fullscreen when the time comes. Here’s a little bit of code containing an image which we’ll eventually take to full-screen.
Step 2: Tell the Browser To Go Fullscreen
Step 3: Resize Your Elements
You may have noticed on some browsers (Opera and Chrome) that when you clicked on the fullscreen button that the video player was centered in the middle of a big black screen. That’s because by default, fullscreen mode doesn’t resize your elements for you. Luckily, there’s a simple bit of CSS which will allow you to specify how you want your elements to appear in fullscreen mode. It’s called something different in each browser, but in Chrome, it’s a CSS pseudo-class called :-webkit-full-screen. In Firefox, it’s called :-moz-full-screen. We want our player example to strech all the way across the screen, so that’s what we’ll do.
While you can take pretty much any element and take it to fullscreen mode,
Where Do We Go From Here?