Background Video: Custom mobile only and desktop only sections

If you'd like to use a custom background video section for mobile only while maintaining a different one for desktop, use this customization. 

Example mobile only background video:

Section height is set to 1/3 of screen which shows a wider aspect ratio and no text or call to action was used to keep the area clean. A mobile specific poster image was also used (displayed while video is loading):

Example tablet/desktop only background video:

A different video can be used and different height settings. In this example we used the same video but set to Full screen height which works well on desktop for this type of video. A call to action button was also added and different poster image:

Since these are separate video sections, any or all the settings can be different. You can even use different videos which work better for a desktop customer or mobile. 

How to:

1

Create new section files

From Theme actions, choose Edit code:

PART 1

In the Sections folder, choose Create new section:

Call the file:

background-video-mobile

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code with the code this file:

MOBILE VERSION

Click to view mobile code

Save the file:

PART 2

Next, create a second section file:

In the Sections folder, choose Create new section:

Call the file:

background-video-desktop

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code with the code from this file:

DESKTOP VERSION

Click to view desktop code

Save the file:

2

Add hide/show CSS

Use this link to learn where exactly to add this next code snippet:

Where to add your CSS style code

Add the following code to the very bottom of the file on a new line only if your theme is v/1.7.2 or below:

/* -- code to hide and show mobile and desktop background video -- */
@include media-query($small) {
   .video-desktop {display:none;}
}
@include media-query($medium-up) {
   .video-mobile {display:none;}
}
/* - end - */

Use the following CSS code only if your theme version is 1.8.0 or above:

/* -- code to hide and show mobile and desktop background video -- */
@media only screen and (max-width:750px) {
   .video-desktop {display:none;}
}
@media only screen and (min-width:900px){
   .video-mobile {display:none;}
}
/* - end - */

Save the file:

3

Use the Theme Editor to add and configure the new sections

Open your theme editor (Customize theme).

Next in the sections tab - Add 2 new sections:

Add both the new desktop and mobile banners:

The original Background video is still available, you can use that one if you need the same content and settings for both mobile and desktop. For this customization, we will be using the two new sections created - Background video desktop and Background video mobile. 

After adding the two new banner sections, you can customize each one individually. 

We recommend experimenting with the Video height setting for each one.

Use the Theme Editor's mobile/desktop icons to preview the two different banner sections.

Mobile:

Desktop:

Note:
The main Background section will still show on both desktop and mobile. If you use the above individual sections, be sure to remove or hide the standard Background video section so it's not showing as well. Use only these two new sections to avoid duplicate videos displaying.