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 Configure a new video at the bottom right corner, select the destination page and video type and then, click on next or Target:

If you are editing the target of an existing video, just click on the Select Target icon:

Once you are in the Target section, you will see the option to Use a CSS selector and underlined in blue it says Use a different selector for mobile devices. 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.