Full Screen

by Vladimir Kutepov

HTML

<div id="elem" tabindex="0">Hello</div>
<div id="elem2">World</div>
<button id="button" type="button">Full Screen</button>

CSS

#elem {
  background: green;
}
#elem:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
#elem2 {
  background: red;
}

JavaScript

const elem = document.getElementById("elem");
const button = document.getElementById("button");

button.addEventListener('click', () => {
  if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  }
});

elem.addEventListener('focus', () => {
	elem.textContent += ' focus';
});

elem.addEventListener('blur', () => {
	elem.textContent += ' blur';
});