How to place a Video Background differently on desktop and mobile?

How to place a Video Background differently on desktop and mobile?
You can show a video in one place on desktop and in a different place on mobile. You set this up on the app’s Configure video location page by entering one CSS selector for desktop and another for mobile.
This option is available for Section video background, Element replacement video and Responsive content video. A Full page video background always covers the whole page, so it doesn’t need a target element.
1. Open the video location page
  • New video: in the app navigation menu, click New Youtube/Vimeo video or New Tiktok video. Choose the Video Page and, for YouTube/Vimeo videos, the Video type.
  • Existing video: on the dashboard, find the video in the list and click the location icon in the Position column.


2. Choose Manual Selection

In the Video position selection section, select Manual Selection. The mobile option only appears with manual selection, not with the visual selector.

3. Set the desktop location
In Video selector, enter the CSS selector of the element where the video should go. If you’re using a Responsive content video, also choose a Video placement:
  • Before the selected element
  • As the first child of the selected element
  • As the last child of the selected element
  • After the selected element
4. Set the mobile location
Click Use a different position for mobile. In Mobile video selector, enter the CSS selector for mobile devices. For a Responsive content video, you can also choose a Mobile video placement, which is separate from the desktop placement.

5. Save your changes
How it works:
  • The mobile selector applies to phones and to tablets in portrait mode. All other devices use the main video selector.
  • If you leave the mobile selector empty, the video uses the main selector on every device.
  • If the app can’t find the selected element on the page, the video won’t be shown.
Choose selectors that are simple, robust and unambiguous. If you’re comfortable with HTML, look in your theme for the element where you want the video and use its selector in each field.
If you’d like help, contact us and tell us where you want the video on desktop and on mobile. We’ll set it up for you as soon as possible