=== Device-Specific Media Element ===
Contributors: rondevs
Tags: elementor, media, video, responsive, device-specific
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.0
Stable tag: 1.0.1
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

A WordPress plugin that adds a custom Elementor widget to load different media types based on the visitor's device.

== 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

== Installation ==

1. Download the `device-specific-media-element.zip` file.
2. Upload the `device-specific-media-element.zip` file through the 'Plugins' menu in WordPress (Plugins > Add New > Upload Plugin) or unzip and upload the `device-specific-media-element` folder to the `/wp-content/plugins/` directory.
3. Activate the plugin through the 'Plugins' menu in WordPress.
4. Edit a page with Elementor.
5. Look for "Device-Specific Media" in the Elementor widget panel.
6. Drag and drop the widget to your page.
7. Configure the different media sources for each device type.

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

== Frequently Asked Questions ==

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

== Screenshots ==

1. The Device-Specific Media widget in the Elementor editor, showing media upload fields.
2. Example of different media types displayed on iOS, Mac, and Windows devices.

== Changelog ==

= 1.0.0 =
* Initial release