fullscreen
8 sites
No security coverage
Integrates FullscreenX.js, a zero-dependency, promise-based fullscreen library for modern browsers. Provides automatic CDN fallback when library isn't installed locally. Works with any HTML element.
Features
Basic Functionality:
- Seamlessly integrates FullscreenX.js library into Drupal
- Automatic detection and loading of local or CDN-hosted library
- Zero configuration required for basic usage
- Cross-browser fullscreen API with vendor prefix auto-detection
Unique Features:
- Dual loading strategy: Automatically falls back to CDN (jsDelivr) if local library is not found
- Promise-based API: Modern async/await support for all fullscreen operations
- Smart element targeting: Use CSS selectors or DOM elements directly
- Event system: Listen to fullscreen state changes (enter, exit, change, error)
- Tiny footprint: Only 2.2KB minified library size
- TypeScript support: Full type definitions for enhanced development experience
Use Cases:
- Video players requiring fullscreen playback
- Image galleries and lightboxes
- Presentations and slideshows
- Interactive dashboards and data visualizations
- Gaming interfaces
- Document viewers and readers
- Any content that benefits from distraction-free viewing
Post-Installation
Once installed and enabled, the module automatically loads FullscreenX.js on all pages. No configuration required!
Basic Usage:
- The library is immediately available as
FullscreenXglobal object - Add fullscreen functionality to your custom JavaScript:
// Enter fullscreen
FullscreenX.request('#my-element');
// Exit fullscreen
FullscreenX.exit();
// Toggle fullscreen
FullscreenX.toggle('#video-player');
// Listen to events
FullscreenX.on('enter', () => console.log('Entered fullscreen'));
FullscreenX.on('exit', () => console.log('Exited fullscreen'));Integration Points:
- Custom module JavaScript files
- Theme JavaScript files
- Inline scripts (not recommended)
- Drupal behaviors for AJAX compatibility
No Configuration Pages: This module works out-of-the-box with zero configuration. Simply enable and start using the FullscreenX API in your JavaScript code.
Optional but Recommended:
- FullscreenX.js library (v1.0.0) installed locally at
/libraries/FullscreenX/dist/fullscreenx.min.js - Download from: GitHub Release v1.0.0
If the library is not installed locally, the module automatically loads it from jsDelivr CDN.
Recommended modules/libraries
- Libraries API: Provides a common repository for external libraries
- Advanced CSS/JS Aggregation: Optimizes loading of JavaScript assets
- Video Embed Field: Works great with fullscreen for embedded videos
- Colorbox: Can be enhanced with fullscreen capabilities
- Photoswipe: Gallery module that can benefit from fullscreen integration
What differentiates Fullscreen module:
- Zero dependencies (no jQuery required)
- Smallest footprint (3.70KB)
- Automatic CDN fallback
- Promise-based modern API
- TypeScript support out of the box
Supporting this Module
Ways to contribute:
- Report issues on the issue queue
- Submit patches and improvements
- Write documentation and tutorials
- Star the FullscreenX library on GitHub
Community Documentation
- Library Documentation: FullscreenX README
- Live Demo: Interactive FullscreenX Demo
- API Reference: Complete API Documentation
- NPM Package: fullscreenx on npm
- CDN Stats: jsDelivr CDN Statistics
Quick Start Example
// Basic implementation in Drupal
(function (Drupal, FullscreenX) {
'use strict';
Drupal.behaviors.myFullscreen = {
attach: function (context, settings) {
// Make all videos fullscreen-capable
once('fullscreen-video', '.video-wrapper', context).forEach(function(element) {
element.addEventListener('dblclick', function() {
FullscreenX.toggle(element);
});
});
}
};
})(Drupal, FullscreenX);