Display 1 Video on Mobile and 3 on Desktop

Store Design
, ,
1

I have created a new collection template where I display 3 videos at the bottom of the page.

It works great on desktop. Initially, android users on Chrome were only able to see the middle video which was ideal. But Apple users were able to slide across and see the other 2 videos on each side. I added ‘display: none!important;’ which stopped the videos from displaying altogether on Mobile but i’d really like just one to show.

I have minimal coding knowledge but have managed to get this far with the below code which I added to a new snippet and which I then added to the collection snippet.

This is the page with the videos - Bristol Kilt Hire – MacGregor and MacDuff

Any help would be highly appreciated.

TIA

<style>
  .full-width {
    display: flex;
    justify-content: center;
  }
  
@media only screen and (max-width: 749px) {
.video {
display: none!important;
}
}

/* any screen equal to or wider than 768px */
@media only screen and (min-width: 768px) {
  .full-width {
-webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 1000%;
  max-width: 100%;

  }
}

        
  .video {
    width: 30%; /* Adjust the width as needed */
    margin: 5px; /* Add margin for spacing */
  }
  
  iframe {
    width: 100%;

  }
</style>

<div class="full-width">
<div class="video"><iframe width="100%" height="315" src="https://player.vimeo.com/video/955868502?h=23c84be866&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="How To Hire a Kilt"></iframe></div>
<div class="video"><iframe width="100%" height="315" src="https://player.vimeo.com/video/956559398?h=60d511de7a&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="How To Hire a Kilt"></iframe></div>
<div class="video"><iframe width="100%" height="315" src="https://player.vimeo.com/video/955874508?h=82fe1408e0&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="How To Hire a Kilt"></iframe></div>
</div>
2

Hi @dayvb

Use this code for mobile.

It will show your all three videos in full width. No need to hide any video.

@media only screen and (max-width: 767px) {
.full-width {
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
}
.video {
    width: 100%;
    margin: 0px;
}
}

Regards

Team_OSC

3

Hi Team_OSC,

No luck, unfortunately. Adding that code just displays all three videos in a row but far too small to be functional.

Would it be easier to stack them vertically? That could work too.

Cheers

4

Replace the style of video with this which i gave you:

.video {
        width: 100% !important;
        margin: 0px !important;
    }
5

Hi Team_OSC,

It has stacked on mobile but has messed up the desktop display.

It’s also too much for mobile unfortunately as it makes the page to long.

Is there no way to just display one video on mobile and leave the 3 on desktop?

I’ve left the most recent changes live so you can see.

Cheers