Video section not resizing to fit theme and is pushing outside video container

Technical Q&A
,
1

Hi everyone,

I have embedded an mp4 video on my homepage using some custom code to remove the youtube and vimeo interface (it links directly from Shopify file repository).

The problem: The video section does not automatically resize or align to fit the theme:

  • In desktop, the video is off centre.
  • In mobile, the video does not resize, and it simply shows a corner of the full size video section.

Store: geckostudio.nz

Password: gecko

Desktop - video not centered.JPG
Desktop - video not centered.JPG934Ă—1252 66.2 KB

Mobile - Video section not resizing to fit screen.JPG
Mobile - Video section not resizing to fit screen.JPG835Ă—977 21.8 KB

Any help is greatly appreciated :slightly_smiling_face:

2

Hello @Roy37 ,

Greetings from the Store Watchers Support Team! Happy to help you today.

Go to Online Store → Actions → Edit code. Then find theme.liquid.

online-store.JPG
online-store.JPG1549Ă—507 56.2 KB

In your theme.liquid file, please paste the code below before the tag.

{% if template == 'index' %}

{% endif %}

Let me know if need further assistance

Regards,
Store Watchers Support Team

1 Like
3

Hi @Roy37

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.global-media-settings video {
    width: 100% !important;
}
.global-media-settings {
    padding-bottom: 0px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like
4

Hi @Roy37 ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

  1. Go to Edit code on Online Store:

GemPages_0-1678692346763.png
GemPages_0-1678692346763.png400Ă—163 25.3 KB

  1. add my code above the tag on Theme.liquid:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

1 Like
5

Thanks for your suggestion, I pasted it in but it has not fixed the issue.

Roy37_0-1678693592533.png
Roy37_0-1678693592533.png1320Ă—1006 58.7 KB

6

@PageFly-Victor This is helpful! The video no longer looks uneven because it is using the entire width of the page, and it is resizing properly on mobile! Thank you! However the video still looks HUGE on my homepage when viewing on desktop. Is it possible to reduce this at all?

If you view the store on a desktop i’ve published the theme there. I attach a screenshot of the homepage. You can see when I zoom out, the other sections get smaller but the custom video section stays the same size:

Roy37_1-1678694687574.png
Roy37_1-1678694687574.png2557Ă—1276 233 KB

FYI I am using a custom section to embed the video, if that makes a difference. Using the instructions posted here.

7

Thanks @GemPages This has produced the same outcome as my other reply below. Video looks huge. Does it matter that my video is now in a custom section “homepage-video.liquid” ? It is comprised of this code:


  

{% schema %}
{
"name": "Homepage Video",
"class": "index-section index-section--flush",
"settings": [],
"presets": [{
"name": "Homepage Videos",
"category": "Text"
}]
}
{% endschema %}
{% stylesheet %}
  .section-homepage-video{
  width:100%;
  }
  .video-homepage{
  width: 100%;
  height: auto;
  }
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
8

@Roy37 I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.