Thanks for the video. It was a great help. But is it possible to adjust the height of the video container? I have a thick blank space between the bottom of my video and the top edge of the next section of text.
This was really really helpful. Is there a way we can customize the height of the video? For eg, I need to embed a 4:3 aspect ratio video, in order to get more visibility in mobile screen.Thanks in advance.
Edit the "min-height" REM at the bottom of the CSS file (i've removed it so it defaults to the default size, which is big enough for a header on all screen sizes for me)
this worked well, thanks! Also keen to know how to make the video appear as a square on the mobile layout - can you offer any help with this? im unsure how to update the cide
Thanks! Some info that may be useful for others. If you do this on 14 the text boxes say this. missing translation: "t:sections.image-banner.blocks.buttons.settings.button_label_1.default"
Welcome! The video is a background and the code I provided in section-video-banner has different css for different sizes. You could probably playround with that. You have any knowledge of CSS? By the way in my last video I give more tips about this, may you be you can watch that too.ruclips.net/video/LUHWnz85Tuc/видео.html
Really nice video, thanks. Would be cool to be able to keep the text container visible on mobile (or have the text below the video). Overlaying text and keeping it visible on video is neigh on impossible!!
Hello that’s nice thank you so much. I added this to the Banner section of my page and it really worked. However, I copied and pasted this video banner because I wanted to use it in other parts of my homepage. But I encounter an error like this: Since this works as a banner, it shows half of my other video. However, the height of my video is longer. And it only shows the head of the woman in my video :) For this reason, I try to write special code in the CSS part of the theme template, but it never works. How can I do that?
seemed that it would work but on my shop there's always this error: missing translation: "t:sections.image-banner.blocks.heading.settings.heading.default" missing translation: "t:sections.image-banner.blocks.text.settings.text.default" missing translation: "t:sections.image-banner.blocks.buttons.settings.button_label_1.default" missing translation: "t:sections.image-banner.blocks.buttons.settings.button_label_2.default"
@@Webmyster I noticed when I change the text color in the video banner section to be white, the header menu text will change to white too. They should not be connected since they are two different sections. I also noticed that I can't seem to change the text color of the detail text box in the video banner section. I want it to be white too to match header color, but it just only shows gray and I can't find out where to make adjustments. Thank you for your help
Thank you, got an error on the elsif part, can you help with the error? {%- elsif section.settings.image_2 == blank and section.settings.video_background == false -%} {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- if section.settings.image_2 != blank and section.settings.video_background == false -%}
![How To Add Video On Shopify Homepage With Autoplay [Updated - 2025]](http://i.ytimg.com/vi/2ZXRvDS4E1M/mqdefault.jpg)
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
Thanks for the video. It was a great help. But is it possible to adjust the height of the video container? I have a thick blank space between the bottom of my video and the top edge of the next section of text.
Hey Thanks,
How do we make it responsive for the mobile version? Vertical I mean instead of horizontal.
Unbelievable!!!! I am so thankful for you sharing this so freely with everyone. Made my day!!!!!!!
Dude, your content is great and very helpful, I hope life repays you!
@Webmyster Great tutorial - worked well for desktop! How do I make the video banner fill the screen on mobile?
what if I am not using the theme Dawn, does it work? As I follow the steps to past the code in, and no video banner section shows up. >
I can use this widget on other pages, but not the homepage. What would be the solution? Thank you
What if my video doesnt fit really well whenever i put it ? Is there a way to fix it ? Im having a difficult time trying to upload my video.
Thanks for the code. This works like a charm.
This was really really helpful. Is there a way we can customize the height of the video? For eg, I need to embed a 4:3 aspect ratio video, in order to get more visibility in mobile screen.Thanks in advance.
Edit the "min-height" REM at the bottom of the CSS file (i've removed it so it defaults to the default size, which is big enough for a header on all screen sizes for me)
Thank you. how do i make the video autoplay on mobile?
it works, thank you so much!!
great video thanks alot! It worked!
this worked well, thanks! Also keen to know how to make the video appear as a square on the mobile layout - can you offer any help with this? im unsure how to update the cide
Thanks!
Some info that may be useful for others. If you do this on 14 the text boxes say this.
missing translation: "t:sections.image-banner.blocks.buttons.settings.button_label_1.default"
Hi! Thank you so much for this. I would love to have a different size on desktop and on mobile because. How can I change this? 😄
Welcome! The video is a background and the code I provided in section-video-banner has different css for different sizes. You could probably playround with that. You have any knowledge of CSS? By the way in my last video I give more tips about this, may you be you can watch that too.ruclips.net/video/LUHWnz85Tuc/видео.html
bonjour comment rendre faire pour que sur mobile sa prenne tout la place ? svp
Really nice video, thanks. Would be cool to be able to keep the text container visible on mobile (or have the text below the video). Overlaying text and keeping it visible on video is neigh on impossible!!
Does it not autoplay for anyone else on mobile?
Hello that’s nice thank you so much. I added this to the Banner section of my page and it really worked. However, I copied and pasted this video banner because I wanted to use it in other parts of my homepage. But I encounter an error like this: Since this works as a banner, it shows half of my other video. However, the height of my video is longer. And it only shows the head of the woman in my video :) For this reason, I try to write special code in the CSS part of the theme template, but it never works. How can I do that?
worked :)
Really Nice
Why i cannot see the code?
thanks
thank you boss
seemed that it would work but on my shop there's always this error:
missing translation: "t:sections.image-banner.blocks.heading.settings.heading.default"
missing translation: "t:sections.image-banner.blocks.text.settings.text.default"
missing translation: "t:sections.image-banner.blocks.buttons.settings.button_label_1.default"
missing translation: "t:sections.image-banner.blocks.buttons.settings.button_label_2.default"
same bro
I don't know why my comment is not showing. Posted the comment on your blog page too. Thanks!
Welcome! Hope the code worked for you
@@Webmyster Hi, no I encountered issues with your code and I left multiple comments here and on your blog! Could you confirm received?
@@Webmyster I noticed when I change the text color in the video banner section to be white, the header menu text will change to white too. They should not be connected since they are two different sections. I also noticed that I can't seem to change the text color of the detail text box in the video banner section. I want it to be white too to match header color, but it just only shows gray and I can't find out where to make adjustments. Thank you for your help
If you get rid of all the buttons....the size changes....and does not work on mobile....This is why I hard code and hate Shopify
Thank you, got an error on the elsif part, can you help with the error?
{%- elsif section.settings.image_2 == blank and section.settings.video_background == false -%}
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if section.settings.image_2 != blank and section.settings.video_background == false -%}
received error as well