Re: How do I display a different video for desktop and another for mobile with the Dawn theme?

How do I display a different video for desktop and another for mobile with the Dawn theme?

AverageBoy01
New Member
5 0 0

Hi Everyone, 

 

I have been trying to figure out how to prompt different videos to launch depending on whether the user is viewing the shop on mobile or desktop. 

 

I was told that if I uploaded two custom liquid codes featuring the landscape video (desktop) and portrait video (mobile) then there was a code that would prompt each one to launch for each device. 

This was the code I was suggested :

 

/* Code for Desktop Banner */

@media screen and (max-width: 480px){
#shopify-section-template--22677475131741__custom_liquid_geKPV3 {
display: none;
/* Code contrubution by websensepro.com */
}}

/* Code for Mobile Banner */
@media screen and (max-width: 480px) {
#shopify-section-template--22677475131741__custom_liquid_zMBVDz {
display: block !important;
/* Code contrubution by websensepro.com */
}}

#shopify-section-template--22677475131741__custom_liquid_zMBVDz {
display: none;
}



I currently have added the two custom liquid codes to feature the landscape video (desktop) on the home page like so : 

Screenshot 2024-05-20 at 20.28.21.png

 

and then another liquid code for the portrait video (mobile)

Screenshot 2024-05-20 at 20.33.06.png

 

 

Now with the code it displays perfectly within the customise tool and also only displays one video on desktop but once I view on a mobile it displays both like so :

 

IMG_8067.jpg

 

I hope I explained this clear enough... 

If anyone has any ideas please let me know. 

Thank you!

Replies 26 (26)

EBOOST
Shopify Partner
1224 319 366

Hi@AverageBoy01 ,

I checked your store. "}"  is missing in the base.css. You can refer screenshot below to add

EBOOST_1-1716256544956.png

EBOOST_2-1716256716910.png

Add code below to base.css

@media screen and (min-width: 481px) {
  #shopify-section-template--22677475131741__custom_liquid_zMBVDz {
    display: none!important;
  }
  #shopify-section-template--22677475131741__custom_liquid_geKPV3 {
    display: block!important;
  }
}
@media screen and (max-width: 480px) {
  #shopify-section-template--22677475131741__custom_liquid_geKPV3 {
    display: none!important;
  }
  #shopify-section-template--22677475131741__custom_liquid_zMBVDz {
    display: block!important;
  }
}

EBOOST_3-1716257009030.png

 

 

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
AverageBoy01
New Member
5 0 0

Thank you!!! Fixed now. Life saver.

notiziad
Visitor
2 0 0

How can this be done? i have added a video block and then tried to include the code but nothing worked. I have also tried to include the code within the "edit code" in a new section which i called custom video but nothing happened. 

 

In which section does the custom liquid have to be included and how can i make it play automatically.

 

Could you please provide the steps for displaying 2 different videos: one for mobile and one for desktop.

 

Thank you very much in advance!!

EBOOST
Shopify Partner
1224 319 366

Hi @notiziad ,

 

Could you share your URL store? I will help to check it.

Because your store will have an other ID for each section. So when you apply code above it will not work. 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
notiziad
Visitor
2 0 0

Hello! Thanks for your reply. We haven't launched it yet, it is password protected for visitors. Shall i e-mail the password for visitors to you? 

We have added on the homepage a video section from template and tried to put the liquid code  with the link of the video but it says that the sintax is wrong. I have tried all this on a copy but nothing worked. I have added the video as a property instead of a liquid code. Also tried to add custom css to the video but nothing, tried to change in html still nothing. Also it's not playing on loop without having to press play.homepage.jpeg

 

EBOOST
Shopify Partner
1224 319 366

Hi,

Yes, I will help to take a look issue for you. Please help share info.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
projectsbydel
Excursionist
22 1 3

Thrilled I found this chat as I have been looking for a similar solution. I currently have my site set up for different banner images but want to change it to having different banner videos for mobile and desktop - I could not find any video or discussion talking about this (only banner images). @EBOOST  is it possible to take a quick look at mine to help me figure out what code is needed? 

EBOOST
Shopify Partner
1224 319 366

Hi @projectsbydel ,

Which theme are you using? If you don't use a free theme. Could you share code of video section? Because  The fee theme will have other structure and I can't access to see their code. So I need you share code.  I will help to apply it for you.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
projectsbydel
Excursionist
22 1 3

Oh sorry. Yes I am using the free Dawn theme.

EBOOST
Shopify Partner
1224 319 366

Hi @projectsbydel ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Sections/video.liquid
3. Replace code of file with code  here https://github.com/eboost10/2640367/blob/main/2642389/sections/video_seperata_mobile_deskotp.liquid

4. Go to theme -> customize -> add your settings

EBOOST_0-1722635746887.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
projectsbydel
Excursionist
22 1 3

Hello - thanks for the reply. So this works if I just want a different 'video', however what i am looking for is different 'video banners'. That way I can put text/buttons over it.

 

projectsbydel_0-1722650155012.png

 

EBOOST
Shopify Partner
1224 319 366

Hi,

I updated code here https://github.com/eboost10/2640367/blob/main/2642389/sections/video_seperata_mobile_deskotp.liquid. Could you try it again?

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
projectsbydel
Excursionist
22 1 3

should i put this in the video.liquid file or the video-banner.liquid file?

EBOOST
Shopify Partner
1224 319 366

Hi,

it's video-banner.liquid file

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
projectsbydel
Excursionist
22 1 3

Unfortunately it is not working properly. Although there is now the option to put a separate desktop and mobile video, the banner is containerized on desktop, even when you disable that option and the videos do not autoplay . Also my mobile video display size is very small with banner and button overlap too big.

projectsbydel_0-1722692800269.png

 

projectsbydel_1-1722692842850.png

 

 

 

 

EBOOST
Shopify Partner
1224 319 366

😛

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
EBOOST
Shopify Partner
1224 319 366

Hi,

- I added an option to show content below video in mobile.

- Removed auto play video

- Updated  code for Show container on desktop option.

https://github.com/eboost10/2640367/blob/main/2642389/sections/video_seperata_mobile_deskotp.liquid

EBOOST_0-1722701010151.png

EBOOST_1-1722701031339.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
projectsbydel
Excursionist
22 1 3

Thanks for the help. 

 

Unfortunately videos are not autoplaying and mobile is still not functional from a sizing standpoint. I do appreciate the attempts however. 

EBOOST
Shopify Partner
1224 319 366

Hi,

Video mobile should be 16:9 aspect ratio.  I turned off autoplaying video featured.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
muffi
Visitor
3 0 0

How do I remove the video controls that shows up when loading? The pause button.

EBOOST
Shopify Partner
1224 319 366

Hi,

Could you share your store? I will help check to find a solution for you.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
muffi
Visitor
3 0 0
EBOOST
Shopify Partner
1224 319 366

Hi,

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/component-deferred-media.css

3. Add code below to end of file.

.video-section .deferred-media__poster{
	visibility: hidden;
}

EBOOST_0-1729597384766.png

 

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
muffi
Visitor
3 0 0

Thanks for the reply. Unfortunately it doesn't work.

EcommKingz
Shopify Partner
1 0 0

Hey, This code works perfect but when I add a video for both there seems to be like a dark overlay on them? Its as if I turned down the brightness on them or added a dark transparent layer over them. Can you take a look please? Thank you

EBOOST
Shopify Partner
1224 319 366

Hi @EcommKingz ,

Could you share your URL store? I will help to take a look it.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips