ReaveaJS Video Full Screen

index.html

<!--  Add this before your HTML's closing body tag  -->
  <script>
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        plugins: [
          RevealMarkdown,
          RevealHighlight,
          RevealNotes,
          RevealMath.KaTeX,
        ],
      });
      // Function to make a video element fullscreen
      function makeVideoFullScreen(videoElement) {
        if (videoElement.requestFullscreen) {
          videoElement.requestFullscreen();
        } else if (videoElement.mozRequestFullScreen) {
          videoElement.mozRequestFullScreen();
        } else if (videoElement.webkitRequestFullscreen) {
          videoElement.webkitRequestFullscreen();
        } else if (videoElement.msRequestFullscreen) {
          videoElement.msRequestFullscreen();
        }
      }
    
      // Listen for slide changes
      Reveal.addEventListener('slidechanged', function (event) {
        // Get the current slide
        var currentSlide = event.currentSlide;
    
        // Find video elements within the current slide
        var videos = currentSlide.querySelectorAll('video');
    
        // If there are videos on the current slide, make them fullscreen
        if (videos.length > 0) {
          makeVideoFullScreen(videos[0]);
        }
      });
      // Keyboard event listener for navigating between slides
      document.addEventListener('keydown', function (event) {
        // Check if a video is in fullscreen mode
        if (!document.fullscreenElement) {
          return;
        }
        if (event.code === 'space') {
          event.preventDefault();
          return;
        }
        switch (event.key) {
          case 'ArrowRight':
          case 'ArrowDown':
          case 'PageDown':
            document.exitFullscreen();
            // Navigate to the next slide
            Reveal.next();
            break;
          case 'ArrowUp':
          case 'ArrowLeft':
          case 'PageUp':
            document.exitFullscreen();
            // Navigate to the previous slide
            Reveal.prev();
            break;
        }
      });
    </script>