Make Firefox's native full screen look like Chrome's

Question

For those of you who don't know, native full screen is where your browser takes up your entire computer screen, like in this example. I have made a full screen JavaScript application that runs, but by default Chrome and Firefox open into native full screen differently. Firefox stretches the object so that it takes up the entire screen(height 100%, width 100%) while Chrome puts the object in front of a black background with its natural proportions.

I would like Firefox to act like the full screen on Chrome. I feel that this is solved with a simple CSS change but I don't know CSS all that well.

This is what I've tried so far:

<!DOCTYPE html>
<html>
<head>
<style>
  .fsElement:-webkit-full-screen {
      //this is the CSS for Chrome's fullscreen page
  }
  .fsElement:-moz-full-screen {
      //this is the CSS for Firefox's fullscreen page
  }
</style>
</head>
<body>

<script type="text/javascript">
  function goFullscreen(id) {
      // Get the element that we want to take into fullscreen mode
      var element = document.getElementById(id);

      // These function will not exist in the browsers that don't support fullscreen mode yet, 
      // so we'll have to check to see if they're available before calling them.

      if (element.mozRequestFullScreen) {
          // This is how to go into fullscren mode in Firefox
          element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
          // This is how to go into fullscreen mode in Chrome and Safari
          // Both of those browsers are based on the Webkit project, hence the same prefix.
          element.webkitRequestFullScreen();
      }
      // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="fsElement" height="375" width="500" src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" id="kittenPic"></img>
<br />
<button onclick="goFullscreen('kittenPic'); return false">Click Me To Go Fullscreen!</button>

</body>
</html>

Thanks in advance!

@Lie Ryan and Andrew Barber: I made a JFiddle but it didn't support full screen. I know the above code works because I tested it in both Chrome and Firefox. I was going to make the code cleaner by splitting it up according to language but I think this will be more helpful because they can now easily make a working example on their computer. Is that better? — murk003, Jul 31 '13 at 00:40

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

This is from the MDN: Using full screen mode

Presentation differences

It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself:
:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}
On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.

A working example on jsfiddle (edit). Most of the CSS is for centering the element, adapted from this SO answer, you can shed out most of the CSS and two layers of div if you don't need centering.

It works, thanks! That is a very creative solution to the problem. :) — murk003, Jul 31 '13 at 22:18

Make Firefox's native full screen look like Chrome's

1 Answers1

Presentation differences