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

It was working and now unfortunately it’s not? It’s showing a play button but won’t allow the video to even play now? I’m so confused :weary_face:

Hello @EBOOST
Thank you for your help here.
I’ve added the code to my site but the controls to play, pause and turn the music on and off do not work. Can you please explain to me or send updated code so it works properly? I’ve also tried to make the videos load with the sound playing.
Thank you in advance!

Hi @MaxS_1 ,

You try to use this code here https://github.com/eboost10/2640367/blob/main/2642389/sections/video_seperata_mobile_deskotp_not_autoplay.liquid

@EBOOST Thank you.
Can the video still auto play? When the page loads the video does not play automatically and I see the image attached. Once, I click it works properly, but I need the video to autoplay.

Thank you again in advance for your assistance! It is greatly appreciated.

Hi,

You can get new code here to update for autoplay video.

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

Hi,
It looks a lot better and the controls are working now, but the video does not auto play.

Can you update so the video has controls and autoplays?

Thank you!

Hi @EBOOST ,

Happy holidays!

The video controls are working now, but it does not auto play. Ive reviewed the code and it says “autoplay: true” but for some reason it is not working.

Can you please help and update the code so the video has controls and autoplays?

Thank you, I really appreciate it!

Hey @EBOOST

Happy new year!!

I am using Impact Theme and here is my store link. In the video section, there is no option for the desktop/mobile videos. I tried using your code but it is not working for me, probably I am missing some files which is leading me to a totally weird interface on the shopify dashboard when I go to edit.

Can you help here please?

Thanks,

Hi @ham_029809 ,

Unfortunately no this code only support for Shopify free theme. Could you share code of this section? I will help to take a look it.

Hi Eboost,

I’ve seen you helping quite some people with getting the right video played on the right device. I am also still struggling getting it to work.

I have two videos available for my custom liquid looping video banner on the website. One for Dekstop (landscape) and one for mobile (portrait). I would like to show the landscape one on desktop and the portrait one on mobile.

The code for both video’s:

Desktop:

video { width: 100%; display: block; margin: 0 auto; max-height: 700px; object-fit: cover; }

Mobile:

video { width: 100%; display: block; margin: 0 auto; max-height: 700px; object-fit: cover; }

Should I place both as seperate custom liquid items in the store and then use a code to make the show up on the right device? IF that is the case I can’t seem to get it to work witht he code you provided for base.css

I’m using the dawn theme and the store is currently live with a default video banner but thats the one I want to switch up per device :slightly_smiling_face:

www.herenowbrand.com

If you could take a look and help me with the code I should use to get this to work? Thanks so much!

Hi @HereNowOwner ,

You only add one custom liquid section. After that addd code below:


	

	

1 Like

Amazing @EBOOST Thank you so much!

@EBOOST Hi there,

Can you help me with this code, but instead of the banner, it would be the images/ videos in the product description? I mainly need the code for mobile as I got the perfect size for desktop, but it doesn’t work for mobile.

Can this code only run/work on a certain prodcut template?

Let me know
Thank you :slight_smile: