Onclick Go Full Screen

onclick go full screen

It's possible with JavaScript.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Go fullscreen on button click

Try this…

<script>
function fullscreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||
        (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
</script>
<button onclick="fullscreen()">Click to go fullscreen</button>

How do I make an image full screen on click?

It's difficult to do this with zoom - you have to calculate depending on the current viewport etc dimensions and reposition the image.

Another way of doing it is by having an element that fills the whole viewport and has a high z-index but is normally not displayed. When the user clicks on an image it is set as the background of this large element, with background-size contain so it always exactly fits.

In this snippet clicking on the enlarged image gets rid of it.

function getPics() {} //just for this demo
const imgs = document.querySelectorAll('.gallery img');
const fullPage = document.querySelector('#fullpage');

imgs.forEach(img => {
  img.addEventListener('click', function() {
    fullPage.style.backgroundImage = 'url(' + img.src + ')';
    fullPage.style.display = 'block';
  });
});

#fullpage {
  display: none;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-color: black;
}

<body onload="getPics()">
  <div class="container">
    <h1>Photo Gallery</h1>
    <div class="gallery">
      <img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
      /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" />
    </div>
  </div>
  <div id="fullpage" onclick="this.style.display='none';"></div>

js fullscreen toggle button goes to fullscreen but won't exit it

The functions to request full screen, such as webkitRequestFullScreen, are on document.documentElement, but the ones to exit full screen, such as webkitExitFullscreen, are just on document. The snippet below works properly on Chrome, Edge, and IE.

document.getElementById("toggle-fs").addEventListener("click", function() {
  toggleFS()
});

function isFullScreen() {
  return (document.fullScreenElement && document.fullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null) ||
    (document.mozFullScreen || document.webkitIsFullScreen);
}

function enterFS() {
  var page = document.documentElement
  if (page.requestFullscreen) page.requestFullscreen();
  else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
  else if (page.msRequestFullscreen) page.msRequestFullscreen();
  else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}

function exitFS() {
  if (document.exitFullScreen) return document.exitFullScreen();
  else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
  else if (document.msExitFullscreen) return document.msExitFullscreen();
  else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}

function toggleFS() {
  if (!isFullScreen()) {
    enterFS();
    document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
  } else {
    exitFS();
    document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
  }
}

JsFiddle

Onclick opens video in fullscreen

you almost found the solution yourself:

import { useRef } from "react";
import "./styles.css";

export default function App() {
  const vidRef = useRef(null);

  const handlePlay = () => {
      const elem = vidRef.current
      if(elem){ //checking if ref was initiated
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { /* Safari */
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE11 */
          elem.msRequestFullscreen();
        }
      }
  }

  return (
    <video width="350" height="200" controls ref={vidRef}>
      <source
        src={"http://media.w3.org/2010/05/sintel/trailer.ogv"}
        type="video/mp4"
        onPlay={handlePlay}
      />
    </video>
  );
}

How to exit fullscreen onclick using Javascript?

Figured it out.

Apparently, to enter full screen, you need to use the Element, however to exit fullscreen, you use document.

Here is the complete javascript function to toggle fullscreen that works !!!

function fullscreen() {
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);

    var docElm = document.documentElement;
    if (!isInFullScreen) {
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

And a simple case on how to use it :

<button onclick="fullscreen()">Toggle FullScreen</button>

You need to make sure that this is a short method called when the user does an action on the page. From what the documentation says, is this is a feature that requires a higher access mode, and thus you can not (at this time) automatically force fullscreen on things like when the page has loaded, or async events (unless they are events from a users action like Click), etc.

Make div 'fullscreen' onClick?

DEMO

$('div').click(function() {
  $(this).css({
      position:'absolute', //or fixed depending on needs
      top: $(window).scrollTop(), // top pos based on scoll pos
      left: 0,
      height: '100%',
      width: '100%'
  });
});

Onclick Go Full Screen