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

[Roy37]

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 

Any help is greatly appreciated 🙂

[StoreWatchers]

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.

In your theme.liquid file, please paste the code below before the </head> tag.

{% if template == 'index' %}
<style>
@media only screen and (max-width:768px){
#shopify-section-template--15142238158921__c892d132-df93-43b1-a793-33d4abd87914 .video-section__media{
height: 215px!important;
}
#shopify-section-template--15142238158921__c892d132-df93-43b1-a793-33d4abd87914 .video-section__media video{
width: 100%!important;
height: auto!important;
}
}
</style>
{% endif %}

Let me know if need further assistance

Regards,
Store Watchers Support Team

[Roy37]

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

[PageFly-Victor]

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

[Roy37]

@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:

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

[PageFly-Victor]

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

[GemPages]

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:

2. add my code  above the </body> tag on Theme.liquid:

<style>
	#shopify-section-template--15142238158921__c892d132-df93-43b1-a793-33d4abd87914 .video-section__media {
		padding-bottom: 0px !important;
	}
	#shopify-section-template--15142238158921__c892d132-df93-43b1-a793-33d4abd87914 .video-section__media video {
		width: 100% !important;
		max-width: 100% !important;
	}
	
</style>

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

[Roy37]

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: 

<div class="section-homepage-video">
  <video autoplay muted loop playsinline class="video-homepage">
    <source src="https://cdn.shopify.com/videos/c/o/v/a4228e67632f4e71a8325551e5e05e42.mp4" type="video/mp4">
  </video>
</div>
{% 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 %}