How To Display Different Size Custom Liquid For Desktop & Mobile?

AdonisFineJewel · ‎11-29-2023

Hello everyone,

Would anyone please be able to assist me, I have a custom liquid video on my landing page (studio theme). On mobile the size is perfect but on desktop it is hilariously large. Is it possible to change ONLY the desktop size while keeping mobile the same?

Any help would be greatly appreciated, thanks in advance.

Dan-From-Ryviu · ‎11-29-2023

Please use this code for your video code.

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
video.mobile-video {
display: none;
}
@media (max-width: 767px) {
video.mobile-video { display: block !important; }
video.desktop-video { display: none !important; }
}
</style>
<video class="desktop-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
<video class="mobile-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

And add desktop video for video element has class="desktop-video"

and mobile video for video element has class="mobile-video"

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-29-2023

Hi @AdonisFineJewel

Please drop your store link to check

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

AdonisFineJewel · ‎11-29-2023

Hello @Dan-From-Ryviu

store link is

https://adonisfinejewellers.co.uk/

thanks for your response

Dan-From-Ryviu · ‎11-29-2023

Hi @AdonisFineJewel

Please add this code to your theme.liquid file after <head> tag

<style>
#shopify-section-template--20590318321965__98244dc4-1a51-44c0-a9ea-d2b166c8ed08 video {
    max-height:700px;
    background: #e1d1e9;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

AdonisFineJewel · ‎11-29-2023

Thanks you for responding.

The height was absolutely perfect, is it possible now to get the video to fill the screen width ways from border to border while keeping that height?

Dan-From-Ryviu · ‎11-29-2023

Please update code to this and check

<style>
#shopify-section-template--20590318321965__98244dc4-1a51-44c0-a9ea-d2b166c8ed08 video {
    max-height:700px;
    background: #e1d1e9;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

AdonisFineJewel · ‎11-29-2023

Very close but it is still slightly off. Is there no way to get the entire video to fill rather than just a block colour?

The video was filling before it was just far too tall. Now as you can see the video height is great but it has block colours to either side that don't quite match.

Dan-From-Ryviu · ‎11-29-2023

Your ratio of video is 9:16 so if you want it fit to left and right, please convert it to 16:9

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

AdonisFineJewel · ‎11-29-2023

Alright I will get that converted now,

How do I then use the 9:16 for mobile and the 16:9 on desktop?

Dan-From-Ryviu · ‎11-29-2023

You can add 2 sections, mobile section use 9:16 and desktop section will use 16:9 and then add custom code to hide the mobile section on desktop and the desktop section on mobile.

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

AdonisFineJewel · ‎11-29-2023

Alright, I hate to be a pain, Would you please guide me through how I would go about doing that?

Dan-From-Ryviu · ‎11-29-2023

Please use this code for your video code.

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
video.mobile-video {
display: none;
}
@media (max-width: 767px) {
video.mobile-video { display: block !important; }
video.desktop-video { display: none !important; }
}
</style>
<video class="desktop-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
<video class="mobile-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

And add desktop video for video element has class="desktop-video"

and mobile video for video element has class="mobile-video"

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

AdonisFineJewel · ‎11-29-2023

I am just looking now, I don't see where to add the codes you have sent here. I tried to add them into custom CSS but that did not work. Where should I be adding them?

Edit: I have just seen you sent a further guide.

AdonisFineJewel · ‎11-29-2023

Alright Perfect that seems to have worked now, I have just tested mobile and desktop. Very much appreciated on the help.

Dan-From-Ryviu · ‎11-29-2023

Happy I could help

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.