Hi all,
Found code on another forum post to add videos not on Youtube to our website’s homepage, and it works great. The video is in portrait mode so I sized it down, but we’d like the video to be centered. Here’s the code I used, added to a new liquid section:
{% 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: 50%;> height: auto;> }> {% endstylesheet %}> {% javascript %}> {% endjavascript %}
Can this be centered? Any help will be appreciated.
Hi @imexmodelco2
You can try to update your code to this and check if it works
{% 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: 50%;
height: auto;
margin: 0 auto;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
That didn’t quite work- it resized it to be too big again and still is on the left
Could you send me your store link to check?
Here is the link, thank you!
IMEX RC
Video is not up right now because of the incorrect formatting- we didn’t want to post the video on Youtube, hence the workaround
Please enable that video section so I can check and help you
It is enabled on the bottom of the landing page now:
https://www.imexrc.com/
Thank you!
Please add this code to Custom CSS of that section to make the video full width
.video-homepage { width: 100%; padding: 4rem; }
@media (max-width: 767px){ padding: 2rem; }
We don’t want the video to be full page width, maybe half. Just want the video itself centered on the page. If video is full width, it will be far too long on our page since it’s a vertical video. That’s why I had it at 50% width in the original code.
The custom CSS doesn’t work with it anyway: “Invalid custom CSS: Certain At-rules are not supported. Try using global CSS.”
Thank you for trying anyway.
Got it, so please update code to this and add it to theme.liquid file before tag
1 Like
This worked perfectly, thank you!
1 Like
