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. Edit a page with Elementor.
2. Find the “Device-Specific Media” widget in the Elementor editor.
3. Add the widget to your page.
4. Upload or specify URLs for each media type:
   • GIF for iOS devices
   • MP4 for Mac devices
   • WebM for other devices
5. Configure playback settings (autoplay, loop, muted, controls).
6. Add a fallback image/message for unsupported browsers.
7. Save and publish your page.

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