How to display a desktop and mobile version of a video file, using video banner in Dawn theme

2 0 0

Hi, i'm using the video banner in Dawn theme, and I have loaded in my .mp4 it looks great on desktop. I added some mobile code to display the screen in a 2:3 ratio, I have a separate mobile video file that I would like to load in. Can someone weigh in on how to code that? I was able to find someone adding in a desktop and mobile "image banner". Looking for any suggestions as I'm new to using shopify.

Replies 2 (2)

2 0 0

I'm actually realizing that loading the 2:3 video in works with the code i have added. and then the mobile will be the 2:3 ratio // i have added code within my editor, generic dawn theme wont display this initially

Shopify Partner
8012 1561 1586

Hi @christiebianco 

You can add this code to theme.liquid file after <head> to check if it works for you.

.videoBackground .fullscreen-video-wrap {
height: calc(100vh - 46px) !important;


- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.