Embedding 9:16 Youtube Video in Shopify Page (bad quality on mobile)

Store Design
, , ,
1

Hi guys,

We embedded an instructions video, it’s a screen-recording filmed on iPhone (9:16) on our Shopify page.

On desktop, it looks perfectly fine and the quality of the video is good. On mobile it’s the same frame (with black space left and right) that requires the user to zoom in, but most importantly the video quality is really bad when zooming in.

Does anybody know how to fix that? Maybe it’s possible to create two different pages and optimize both inside of the youtube settings, so the video looks good on mobile?

Here is the page: https://memento-gems.com/pages/how-to-scan

Here are also screenshot on how it looks on mobile and when zooming in:

IMG_8510.PNG
IMG_8510.PNG1179×2556 203 KB

IMG_8511.PNG
IMG_8511.PNG1179×2556 251 KB

Best regards,

David

2

Hey David, even though your video was filmed as 9:16 it’s served from Youtube as 16:9 (black bars on the left and right are parts of the video).

This is why it does not fill entire screen on mobile and requires zooming.

It definitely should be possible to create two pages – mobile and desktop or even switch videos on the same page depending on the screen width. Depending on whether your theme supports this or not, a small modification may be necessary.

3

Hi acidgrenn,

Thanks for your answer! Can you help with that?

Best regards,
David

4

Based on what you have now, the easiest would be to add these CSS rules:

@media (min-width:480px){
  div#shopify-section-template--19169152532804__main {
    display: none;
  }
}

@media (max-width:479px){
  div#shopify-section-template--19169152532804__3c5bd959-e3fa-4b41-8558-0a9f77f489cd {
    display: none;
  }
}

This will hide your portrait video section on screens with width of 480 pixels and more (desktop and tablet) and

hide your landscape video section on screens with width up to 479 pixels (mobile).

This is not the ideal solution because it’s hard-coded to the sections you have right now, and if someone will rotate their phone from portrait to desktop there will be no smooth transition, but anything better will require more complex modification.