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

A Video background can be placed in a different location on desktop and mobile directly from the app preferences page.

To do so, a CSS selector will need to be used for each, mobile and desktop. This can be done from the app preferences page in the Target section. 

If you are creating a new video background, click on Add new video at the dashboard, select the destination page and video type and then,if the video is not a full page background, a section will appear to introduce the target element:

If you are editing the target of an existing video, just click on the Settings icon and Change video type or location afterwards:

Once you are in the Video location page, if you select the Manual Selection option, you will see a blue text which says Use a different location for mobile. Clicking it, an input text will appear in which you can insert the mobile target selector. That is the option needed in order to place the gallery in a different location on mobile:

Please note that if you are configuring a Responsive content video, from the CSS selector field it is also possible to choose the placement of the gallery such as:

After or before the selected element and as the last child or first child of the selected element:

Those options will help you to properly position any video in your store. The idea is to always choose a selector which is simple, robust and unambiguous.

If you are comfortable with HTML, you can set a jQuery selector for the HTML element in your template where you want to put the video and type that selector accordingly in each box.

Lastly, please note that we can also help you change the location of the video differently on desktop and mobile, simply drop us an email and we will help you as soon as possible.