Technical question on making an element full screen

Hallo everyone,

I don’t know why this doesn’t work. :cold_sweat:
Does anyone else know?

I am trying to make a page element full screen.
To start off with, I just hooked the custom function onto wp_head(); so it will show up on the front end;
The div element id is “main” (so ex header and menus).

Here is a shortened version:


add_action('wp_head', 'full_screen');

function full_screen() {


<script type="text/javascript">
var elem = document.getElementById("main"); 
function openFullscreen() {
if (elem.webkitRequestFullscreen) {

Is your code actually calling the openFullscreen function?


Well, that’s PHP. I’m asking about the JS function.
And that’s not how you call your PHP function either.

1 Like

For the actual “how to do fullscreen”, read

If your question is about how to get the code into your page, ask about the part that is confusing. I think you’re not quite clear on the action.


Going to read that now. Thank you, @joyously

1 Like

I think my problem is that I don’t understand how the JavaScript script is integrated into the PHP one.

Am I supposed to add a JavaScript event listener to the code before it can work?
Is that what you mean when you asked if I called the JavaScript?

Have a try writing openFullscreen() on the browser console…

Hallo @Simone

openFullScreen shows up as an auto complete option on my page when I type it into the console while on my page.

If I press Enter I get:

Uncaught ReferenceError: openFullScreen is not defined at anonymous:1:1

Ok, it seems it’s not declared. For inserting javascript I use wp_enqueue_script. But not sure is the right way…


I am adding this as the solution.

I am still busy getting it to do things the way I want them done, but the preliminary try works if I replace my JavaScript script with the following from the Mozilla site quoted by Joy.
So far it only lets me make the entire document full screen when pressing Enter, but I’ll be able to work at making it only the body element and upon load, instead of upon Enter.

Thank you. :bouquet:

EDITED to add Stack Overflow info:

I found this on Stack Overflow at

Modern browsers don’t allow auto full screen for security reasons.
There must be an interaction from the user first. Like clicking the “hello”-button.

So basically there needs to be an event listener and the listener can’t be onload.

From the Mozilla site:

  if (e.keyCode === 13) {
}, false);
function toggleFullScreen() {
  if (!document.fullscreenElement) {
  } else {
    if (document.exitFullscreen) {

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.