Description
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:
- Edit a page with Elementor.
- Find the “Device-Specific Media” widget in the Elementor editor.
- Add the widget to your page.
- Upload or specify URLs for each media type:
- GIF for iOS devices
- MP4 for Mac devices
- WebM for other devices
- Configure playback settings (autoplay, loop, muted, controls).
- Add a fallback image/message for unsupported browsers.
- Save and publish your page.
The plugin will automatically detect the visitor’s device and load the appropriate media type.
Screenshots
The Device-Specific Media widget in the Elementor editor, showing media upload fields. 
Example of different media types displayed on iOS, Mac, and Windows devices. 
Installation
- Download the
device-specific-media-element.zipfile. - Upload the
device-specific-media-element.zipfile through the ‘Plugins’ menu in WordPress (Plugins > Add New > Upload Plugin) or unzip and upload thedevice-specific-media-elementfolder to the/wp-content/plugins/directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- Edit a page with Elementor.
- Look for “Device-Specific Media” in the Elementor widget panel.
- Drag and drop the widget to your page.
- Configure the different media sources for each device type.
FAQ
-
Does this plugin work with page builders other than Elementor?
-
Currently, the plugin only supports Elementor. Future versions may add support for other page builders.
-
What happens if I don’t upload a specific media type?
-
If a media type for a specific device is not provided, the plugin will try to use one of the other media types as a fallback. If no media is available, it will display the fallback image/message.
-
Can I control video playback options?
-
Yes, you can configure autoplay, loop, muted, and controls options for video elements.
-
Will this slow down my website?
-
No, this plugin helps optimize performance by loading only the media type appropriate for the visitor’s device, rather than loading multiple formats.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Device-Specific Media Element” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Device-Specific Media Element” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release