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

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

christiebianco
Tourist
7 0 1

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)

christiebianco
Tourist
7 0 1

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

Dan-From-Ryviu
Shopify Partner
10886 2144 2282

Hi @christiebianco 

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

<style>
.videoBackground .fullscreen-video-wrap {
height: calc(100vh - 46px) !important;
}
</style>

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.