Display video on desktop, but display an image on mobile in Revolution Slider

To display a video on desktop and an image on mobile using Revolution Slider, you can take advantage of its built-in visibility options and responsive layers feature. Here’s a step-by-step guide on how to set this up:

Step 1: Create Two Separate Layers (One for Video, One for Image)

Add a Video Layer for desktop users:

• Open your Revolution Slider editor.
• Add a new video layer by clicking on the “Add Layer” button and selecting “Video”.
• Insert your video URL (YouTube, Vimeo, or self-hosted) in the provided field.
• Adjust the video settings as needed (e.g., autoplay, loop, etc.).

Add an Image Layer for mobile users:

• Add another layer, but this time choose Image.
• Upload the image you want to display on mobile devices.
• You can adjust the position, size, and other settings for this image.

Step 2: Configure Layer Visibility for Desktop and Mobile

Revolution Slider allows you to hide or show layers depending on the device type (desktop, tablet, mobile). Here’s how to set this up:

Select the Video Layer (Desktop Only)

• Click on the video layer.
• Scroll down in the layer options to find the Visibility section.
• Under “Hide on Devices”, select Mobile and Tablet.
  • This ensures that the video is hidden on smaller screens (mobiles and tablets), but visible on desktop.

Select the Image Layer (Mobile Only)

• Click on the image layer.
• In the same Visibility section, check the option to hide on Desktop but show on Mobile and Tablet.
  • This ensures the image will only be displayed on mobile devices while hiding it on desktop.

Step 3: Adjust Responsiveness Settings

Revolution Slider includes powerful tools to ensure your slider looks good on all screen sizes:

Go to the Slider Settings in the top menu.

Enable Responsive Options:

• Ensure that responsive options are enabled for your slider to allow it to resize properly on different devices.

Adjust any additional styling or positioning for your layers to ensure they look great across all devices.

Step 4: Preview and Test

Preview your slider in the editor.

• You should see the video on desktop, and when you switch to the mobile view, it should show the image.

Test on actual devices to ensure the video only shows on desktops and the image on mobile.

Step 5: Publish the Slider

Once you’re happy with the result, simply save and publish your Revolution Slider.