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

Rownok Bosunia

<p>Device-Specific Media Element is an Elementor extension that allows you to serve different media formats to different devices:</p>
<ul>
<li>For iOS devices (iPhone/iPad) <span aria-hidden="true" class="wp-exclude-emoji">→</span> Load and play .gif files</li>
<li>For Mac devices <span aria-hidden="true" class="wp-exclude-emoji">→</span> Load and play .mp4 files</li>
<li>For other devices (Windows, Android, Linux, etc.) <span aria-hidden="true" class="wp-exclude-emoji">→</span> Load and play .webm files</li>
</ul>
<p>This approach optimizes performance by serving the most appropriate media format for each device type, improving load times and user experience.</p>
<h4>Features</h4>
<ul>
<li>Custom Elementor widget for device-specific media</li>
<li>Automatic device detection using JavaScript</li>
<li>Support for .gif, .mp4, and .webm formats</li>
<li>Options for autoplay, loop, mute, and controls</li>
<li>Fallback media for unsupported browsers</li>
<li>Fully responsive design</li>
<li>Multiple widget instances on the same page</li>
<li>Clean, modular code following WordPress standards</li>
</ul>
<h3>Usage</h3>
<p>After installing and activating the plugin:</p>
<ol>
<li>Edit a page with Elementor.</li>
<li>Find the “Device-Specific Media” widget in the Elementor editor.</li>
<li>Add the widget to your page.</li>
<li>Upload or specify URLs for each media type:
<ul>
<li>GIF for iOS devices</li>
<li>MP4 for Mac devices</li>
<li>WebM for other devices</li>
</ul>
</li>
<li>Configure playback settings (autoplay, loop, muted, controls).</li>
<li>Add a fallback image/message for unsupported browsers.</li>
<li>Save and publish your page.</li>
</ol>
<p>The plugin will automatically detect the visitor’s device and load the appropriate media type.</p>


Alternatives to Device-Specific Media Element

Top alternatives