In this video I will show you how to easily add a full screen toggle button to your Elementor website. This functionality can be helpful if you want to present your website in a presentation mode similar to a PowerPoint presentation.
I will show you how to add this button in your header section if you are using Elementor Pro. I will also show you how to add this button to the main content area of your website.
Timestamps:
- 0:00 Introduction
- 1:10 Elementor Backend Overview
- 1:49 Add Javascript Code in Footer
- 2:50 Add Fullscreen Button In Header
- 6:04 Add Fullscreen Button In Body
- 7:56 Add Multiple Fullscreen Buttons
JavaScript Fullscreen API Reference Code:
https://www.thewebflash.com/toggling-fullscreen-mode-using-the-html5-fullscreen-api/
Javascript Code:
<script>
function toggleFullscreen(elem) {
elem = elem || document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.getElementById('btnFullscreen').addEventListener('click', function() {
toggleFullscreen();
});
</script>
