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

christiebianco · ‎06-11-2024

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.

christiebianco · ‎06-11-2024

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 · ‎06-11-2024

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>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rowanvdv · ‎04-12-2025

Worked for me, you're amazing

Dan-From-Ryviu · ‎04-12-2025

Very welcome!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.