Seperate video for mobile view

hi,

my website - www.kulaindia.com

theme - horizon theme.

I added a video to the home page. It works perfectly on the desktop but I want to upload a different video that is vertical for better mobile experience rather than the horizontal desktop video. It looks very small. can someone help me with the above.

i’ve attached a photo of how the video currently looks on the phone.

2 Likes

Hey @SNAP_SHOT

I have a suggestion, first why don’t you add the vertical video as well so your website should be displaying two videos and once that’s done then I’ll provide you the code to hide vertical video on desktop and horizontal video on mobile. Let me know once that’s done.

Best,
Moeed

Hi Moeed,

I’ve added the 2 videos.

Hi @Moeed , I’ve added the 2 videos like you suggested. looking forward.

Hey @SNAP_SHOT

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
div#shopify-section-template--26031664398648__section_MQ3zdq {
    display: none !important;
}
}
@media screen and (min-width: 768px) {
div#shopify-section-template--26031664398648__section_HFTrzT {
    display: none !important;
}
}
</style>

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

I’ve shared solution which does not require editing theme code – How to upload video on website banner for mobile and dekstop - #5 by tim_1

The benefit here is that you do not need to hard-code cryptic section IDs, Shopify will do it for you automatically.
And works in any theme.

@Moeed unable to find theme.liquid in my theme.

there is no option to input css code in the video section in my theme.

It’s located in the “Layout” folder when you edit code

It’s a standard Shopify functionality which exists in every theme and available for every section.
Probably you’re looking in a wrong place.

1 Like

Ahh..my bad. Got it..was looking in the wrong area.

1 Like

it’s working for mobile view but gets hidden for laptop.