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:

• 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.