How to Prevent Background Video from Loading on Mobiles in Oxygen

Updated on November 13, 2020

In the Oxygen Facebook group a user asked:

I may be completely missing something, but does anyone know how to prevent a background video from loading on mobile? I set the video to hide below 768px and I see where it displays none in the CSS but it's still loading which makes the site load really slow on mobile network.

In this members-only tutorial we shall

• set video background URL for a Section
• set a video overlay
• inspect the page on the front end in Dev Tools, copy the .oxy-video-container div's HTML and paste in a Code Block inside the Section
• change src to data-src to prevent the video from loading (at all screen sizes)
• copy and paste the overlay CSS in the Code Block
• write JS to check the viewport width on document load using matchMedia and if more than a specified width, loop over all sections that have the .oxy-video-container class, change data-src to src and run the play() method on the video

to make the video(s) load and autoplay only for min-width: 768px media query (or any media query of your choice). In this case, for viewport widths equal to or less than 767px, the video will not even load when the page is rendered.

Note: We are not going to track the viewport width change in the JS code of this tutorial. A page refresh is needed if you are testing this implementation in your browser as the browser width is reduced from say 800px down to 767px by dragging the right edge to left. This is not a matter of importance for practical purposes of the problem we are trying to solve here.

Step 1

a) In the Oxygen editor, add a Section.

Give it a class of oxy-video-background.

Note: If you plan on having multiple video background sections on a given page with different look for each, make the following changes to the ID rather than to the class.

Text Color: #fff

(optional) Horizontal Item Alignment: Center

Advanced > Size & Spacing: Specify a higher top and bottom padding values (like 150px each) vs the default 75px to increase the height of the Section.

Advanced > Background

Background Image: set your desired background image. This may show up for a quick second before the video appears on desktops and all the time on tablets/mobiles (depending on your media query in a next step)

Image Overlay Color: I've set this to a darkish color like rgba(7,17,28,0.6) in my test site

Background Repeat: no-repeat

Left: 50%
Top: 50%

Video Background URL: specify your desired video URL

Video Overlay: set this to the same as Image Overlay Color

b) Add your desired content inside the Section. In my test site, I added a Heading and a Text component.

c) Inspect the Section on the front end with your browser's Dev Tools (press F12).

Select the div that has the class of oxy-video-container and press Ctrl/Cmd+C to copy its HTML to your clipboard.

d) Add a Code Block component inside the Section. It does not matter where this is located inside i.e., above or below other elements. In my test site, I moved it to the top above other elements inside the Section.

PHP & HTML:

(paste the markup of div.oxy-video-container).

Ex.:

<div class="oxy-video-container"><video autoplay="" loop="" playsinline="" muted=""><source src="https://oxygen2.local/wp-content/uploads/2020/08/coverr-wall-street-sign-1572187596364.mp4"></video><div class="oxy-video-overlay"></div></div>

Change src to data-src.

Ex.:

<div class="oxy-video-container"><video autoplay="" loop="" playsinline="" muted=""><source data-src="https://oxygen2.local/wp-content/uploads/2020/08/coverr-wall-street-sign-1572187596364.mp4"></video><div class="oxy-video-overlay"></div></div>

CSS:

#%%ELEMENT_ID%% .oxy-video-overlay {
    background-color: rgba(7,17,28,0.6);
}

where rgba(7,17,28,0.6) is your Image/Video Overlay Color value.

JavaScript: