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

[AverageBoy01]

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 : 

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

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 :

I hope I explained this clear enough... 

If anyone has any ideas please let me know. 

Thank you!

[EBOOST]

Hi@AverageBoy01 ,

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

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;
  }
}

[AverageBoy01]

Thank you!!! Fixed now. Life saver.

[notiziad]

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]

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. 

[notiziad]

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.

[EBOOST]

Hi,

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

[projectsbydel]

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]

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.

[projectsbydel]

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

[EBOOST]

Hi @projectsbydel ,

May I suggest to update code these steps:

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

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

[projectsbydel]

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.

[EBOOST]

Hi,

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

[projectsbydel]

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

[EBOOST]

Hi,

it's video-banner.liquid file

[projectsbydel]

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.

[EBOOST]

😛

[EBOOST]

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

[projectsbydel]

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]

Hi,

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