Custom coded video to my homepage hero header, works on computer but not mobile screen. Suggestions?

Store Design
,

Topic summary

A user added a custom video to their homepage hero header that displays correctly on desktop but fails on mobile, showing only black and gray margins instead.

Proposed Solution:
A PageFly representative provided troubleshooting steps:

  • Navigate to Online Stores > Themes > More Actions > Edit code
  • Open theme.liquid file
  • Add specific custom CSS/markup code above the </head> tag

Status: The issue appears related to responsive design or mobile viewport settings. A code snippet was shared to resolve the mobile display problem, but the discussion remains open pending confirmation of whether the fix worked.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

I added a custom code video to my homepage hero header. It works on laptop but does not work on mobile. it shows a black and gray. I think that it is caused by the margins. Any suggestions?

IMG_1210.PNG
IMG_1210.PNG1242×2688 309 KB

2

Hi @LegacyR

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1709698808721.png
PageFlyRichard_0-1709698808721.png654×1416 227 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly