TAG
JavaScript
Result
Run
License
<div class="container"> <button type="button" id="btn-fullscreen">Full screen</button></div>
window.addEventListener("load", () => { const elBtn = document.getElementById("btn-fullscreen"); const elWrap = elBtn.parentElement; elBtn.addEventListener("click", e => { let elFullscreen = e.currentTarget.parentElement; let promise = elFullscreen.requestFullscreen(); promise.then(() => { elFullscreen.addEventListener("fullscreenchange", e => { let elTargetStyle = e.currentTarget.style; let btn = e.currentTarget.children[0]; if(document.fullscreenElement) { elTargetStyle.display = "flex"; elTargetStyle.justifyContent = "center"; elTargetStyle.alignItems = "center"; btn.textContent = "Close full screen"; btn.addEventListener("click", e => { document.exitFullscreen(); }, { once: true }); } else { elTargetStyle.display = "block"; btn.textContent = "Full screen"; } }, { once: true }); }, () => {}); }); });
Console
expand_less
License
License
by DevDic
Close