Device-Specific Media Element

Device-Specific Media Element is an Elementor extension that allows you to serve different media formats to different devices:

• For iOS devices (iPhone/iPad) → Load and play .gif files
• For Mac devices → Load and play .mp4 files
• For other devices (Windows, Android, Linux, etc.) → Load and play .webm files

This approach optimizes performance by serving the most appropriate media format for each device type, improving load times and user experience.

Features

• Custom Elementor widget for device-specific media
• Automatic device detection using JavaScript
• Support for .gif, .mp4, and .webm formats
• Options for autoplay, loop, mute, and controls
• Fallback media for unsupported browsers
• Fully responsive design
• Multiple widget instances on the same page
• Clean, modular code following WordPress standards

Usage

After installing and activating the plugin:

1. 01Edit a page with Elementor.
2. 02Find the “Device-Specific Media” widget in the Elementor editor.
3. 03Add the widget to your page.
4. 04Upload or specify URLs for each media type: GIF for iOS devices
5. 05MP4 for Mac devices
6. 06WebM for other devices
7. 07Configure playback settings (autoplay, loop, muted, controls).
8. 08Add a fallback image/message for unsupported browsers.
9. 09Save and publish your page.

The plugin will automatically detect the visitor’s device and load the appropriate media type.