I agree! In hindsight, I wish I had put it on our website instead. I do my best to approve people's requests to join quickly and do it several times a day. I do apologize for the inconvenience.
Hello, thaks for a great tutorial. Do zou maybe know how to bee able to see main meny in mobile version of store, which is hidden behind video when I entered the code given. Thank you!
This is a awesome tutorial, thank you so much for making it! I just have a few questions. 1, is there a way for me to change the aspect ratio of the video background? I prefer a wider aspect ratio, but the video background is cropping my video on the sides. 2, is there a way for me to completely remove the caption in the middle? I deleted all the text, but there is still a semi-clear white box. Any help would be greatly appriciated!
I'm sorry, I'm not familiar with BigCommerce. Your best bet would be to find a BigCommerce theme with a video banner built in. Either that or you could try and search for something along the lines of "BigCommerce Video Banner" or "BigCommerce video hero banner". Hope that helps!
Thank you for this video, I've added it to craft theme and while it works very well on the website, it doesn't show up well on mobile. Any ideas on what to do?
Hi, can someone help me? I used the code but when i am at the mobile webshop, the menu bar is underneath the background video. How can i fix that if i click on the menu button the menu comes over the background video?
Hello!!! Thanks for this video! In mobile format, it's getting a white screen at the bottom of the video, how to change that? and how to remove the white background of the text?
Hi, Thank you for your videos they are great!. There is an issue with mobile the video background shows over the dropdown main menu. Do you know how to fix it?. Thanks
Hi I copied the code and pasted into the new section. But the video doesn’t play on its own and the cover photo is cut off how can I adjust the code to accommodate for both?
Hello,this is great tutorial and it helped a lot but the problem everyone talking about is the video is not playing on the mobile...Please respond to our questions, we need help.
I just did everything you adressed in this video. The only problem that I experience is that it doesn't display on mobile. Do you know how to fix this issue?
I'm wondering if there is code out there to change the position of the button over the banner. My button lands square on the product in my video. Any ideas are much appreciated!!
I was trying as per your video. But I saw from footer email and column over lapped to my featured collection. Video background was showing in place of banner image. Can u please help me
Yes, go here: facebook.com/groups/ecomgeeks Click on Files or use the search button to search "video". The files are called video-bg-code-v1-1.txt & video-bg-code-v2-1.txt
it keeps saying video format not supported, i even found the video you used of the girl in the dress and still not working cant upload the video? need help
Hello! I'e jumped on the Facebook page and requested to join. Still waiting for a response since two days ago.. is there any chance of adding the code here instead of making us wait while we get accepted into the private group ?
Same here it doesnt play on mobile. Sometimes it will work on android but it never works on my iphone. Any fix for this? Any help would be greatly appreciated.
i think there may have been an update because it is not working and im getting the following message: Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined.
Hi, Is there anyway to access the code? Did anyone manage to access the code on this chat - as I'm not allowed on the Facebook. I really hope this is not spam?
Hi! Thank you for the video. On the desktop it worked perfectly, but on my mobile i get the video with underneath it black screen. How can I solve this? Does someone knows?
Hi there! Sorry, but there is any other way to get the code? I sent the notification to join facebook group, but i didn't get answer... Does the group still alive? Thanks!
Why Facebook? What's the target audience of this video? Only 18% of GenZ uses Facebook. Wish the code was hyperlinked in pastebin, or simply un the description.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
![How To Show Different Banner Images On Mobile & Desktop [Shopify - Updated]](/img/n.gif)
wish the code was in the description
did you ever get the code? i havent been added to the group
@@GillianDEmilio did you get the code yet?
@@oliverlow5349 no i didnt
@@GillianDEmilio i'm still waiting to get approved in the group so no code yet
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
{%- if block.settings.video_link != blank -%}
{% endif %}
{% if block.settings.title != blank %}
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% else %}
{% if block.settings.title != blank %}
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% endif %}
{%- endfor -%}
{% else %}
This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%}
.main-content .videoBackground {
margin-top: -55px;
}
.videoBackground {
height: 100%;
position: relative;
}
.videoBackground .fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoBackground .fullscreen-video-wrap .video-js {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
.videoBackground .fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
.videoBackground .videoBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 500px;
max-height: 800px;
height: calc(100vh - 165px);
position: relative;
}
.videoBackground .imageBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
min-height: calc(100vh - 165px);
height: auto;
}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
z-index: 2;
text-align: center;
}
.videoBackground .overlay {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: 1;
}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: normal;
font-size: 14px;
margin-top: 20px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #FFF;
font-size: 30px;
line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
max-width: 500px;
margin: 0 auto;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
font-size: 18px;
line-height: 28px;
}
.videoBackground .placeholderNoblocks {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.main-content .videoBackground {
margin-top: -35px;
}
.videoBackground .fullscreen-video-wrap {
z-index: 3;
}
.videoBackground .videoBox {
min-height: 500px;
height: 100%;
position: relative;
padding: 0;
}
.videoBackground .fullscreen-video-wrap {
position: relative;
min-height: 300px;
}
.videoBackground .videoBoxInfo {
padding: 40px 20px;
background: #000;
width: 100%;
}
}
{% schema %}
{
"name": {
"en": "Video Background"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_link",
"label": {
"en": "Video link"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"en": "Cover image"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store."
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "color",
"id": "color_bg",
"label": {
"en": "Background color (optional)"
},
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": {
"en": "or use an image (required)"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"default": "Image slide",
"label": {
"en": "Heading"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store."
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": {
"en": "Video Background"
},
"category": {
"en": "Main"
},
"blocks": [
{
"type": "video"
}
]
}
]
}
{% endschema %}
Solid tutorial! Would be amazing if we didn't have to sit idle to be approved to a private fb group to get the modified code to be fair.
I agree! In hindsight, I wish I had put it on our website instead. I do my best to approve people's requests to join quickly and do it several times a day. I do apologize for the inconvenience.
@@EcomGeeks Why don't you just post it in the comments?
@@EcomGeeks I don't have Facebook so this feels a bit unfair - could you please post the code somewhere more accessible? Thank you!
Hate it like you did it with the fb group. thumbs down
RIGHT !!! SMH THIS IS USELESS IF U DONT HAVE A FACEBOOK OR CANT GET IN THE GROUP!
Great tutorial, does anyone have the file with the code to send?
this code is overlapping and taking extra blank space in my shopify store and it taking my footer with it
Excellent video!! Thanks for sharing
The only problem was that on some smartphones the video does not play. Can you help me to resolve this?
Waiting to be approved in fb group, thank you
Hey guys, just wondering how long it takes to get accepted into the Facebook group? :)
Let me know when you get accepted, I'm still waiting!
I will! Unfortunately nothing yet.@@stradleydaughterjewelers9559
@@stradleydaughterjewelers9559 were you able to get it?
Hi there thank you for the tutorial , The video seems to overlap the mobile phone menu, Its right ontop of it is there a way to fix it.
Yes, there is an updated code in the Facebook group. Go to files and view video-bg-code-v1-1.txt
@@EcomGeeks Thank you Guys, you truly rock
@@XolaniZeka hey - would you possibly be able to send me the code ?
how can I add my products over (on top of the video) making the video look more like a background ?
AMAZING! Worked like a charm
Hello, thaks for a great tutorial. Do zou maybe know how to bee able to see main meny in mobile version of store, which is hidden behind video when I entered the code given. Thank you!
Can't get the code since I need your approval for the Facebook group.
Thanks for this video! But I cant seem to find the "files" tab after selecting Settings. Is there somewhere else I can find it?
yes, now it isn't on setting... in the shopify main menu on the left, find the tab "Content", and inside you will find "Files"
Hi, can I please get the code? I haven't been accepted in the group yet! it's kind of urgent!
Is there a way to change the position and size of the text?
This is a awesome tutorial, thank you so much for making it! I just have a few questions. 1, is there a way for me to change the aspect ratio of the video background? I prefer a wider aspect ratio, but the video background is cropping my video on the sides. 2, is there a way for me to completely remove the caption in the middle? I deleted all the text, but there is still a semi-clear white box. Any help would be greatly appriciated!
Did you find out?
@@jjhxnt I want to know as well
Do you know if I can do this for BigCommerce?
I'm sorry, I'm not familiar with BigCommerce. Your best bet would be to find a BigCommerce theme with a video banner built in. Either that or you could try and search for something along the lines of "BigCommerce Video Banner" or "BigCommerce video hero banner". Hope that helps!
I want this on my website ❤ Waiting to join the group!
Thanks for great video :D
That help me alot
Glad to hear!
Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined.
:(
Somebody paste the code
I need a link to the edited code pls. Using a 2.0 theme and it doesn't work well. Google drive would be best. thanks
Hey Ryan! Working on a blog post with the updated codes. I'll follow up on this comment with a link once I have it posted.
Must be one long blog post, you've been writing it for over a year.@@EcomGeeks
@@EcomGeeks hi have you made the link?
@@astentfrizzyfox8091 seems not...
Dope Content E.G.🤘🏼😎💯💧
Is there any way to make the whole video clickable?
Thank you for this video, I've added it to craft theme and while it works very well on the website, it doesn't show up well on mobile. Any ideas on what to do?
Could you email me the code ? I’m waiting to be accepted into the group still 😭
@@luxindia did you get the code ?
Hi, can someone help me? I used the code but when i am at the mobile webshop, the menu bar is underneath the background video. How can i fix that if i click on the menu button the menu comes over the background video?
I have a question... Do the mp4 videos uploaded contain audio?? i have just finished adding my video but for some reason there is no sound
Same question would like the sound to play
Hello! To your point, the original code had some space issues. I'm waiting to be accepted to your Facebook group. Thank you for this video!
Is there a way to move the banner to the left side of the video? Any help would be appreciated. Thank you!
Will the video show up on the mobile version of the store
Hello!!! Thanks for this video! In mobile format, it's getting a white screen at the bottom of the video, how to change that? and how to remove the white background of the text?
Waiting to get into the facebook group ?
On Mobile version the video has a black background that I cant remove. Any way I can remove or at least change the colour of it?
Yes, I show you how to do that in this video: ua-cam.com/video/W9yCnwLfqcY/v-deo.html
Hi, Thank you for your videos they are great!. There is an issue with mobile the video background shows over the dropdown main menu. Do you know how to fix it?. Thanks
When I try to upload a video it says "File format is not supported on a trail plan". Which plan do I need to purchase?
Thanks for the video, I'm waiting to be added to the group.
Hi, I've just requested to join the group. How long will it take till we get accepted?
Approved :). For anyone else who is wondering, I approve requests several times per day.
Update on where to locate files: instead of going to settings, click on content>files. :)
Hi I copied the code and pasted into the new section. But the video doesn’t play on its own and the cover photo is cut off how can I adjust the code to accommodate for both?
Was the code scam ?
Hello,this is great tutorial and it helped a lot but the problem everyone talking about is the video is not playing on the mobile...Please respond to our questions, we need help.
i dont know make this yet
what i do?
Great video! is there a way to completely eliminate the text border?
Did you find a way
@@sleepynunnights8354 sure did
@@jaredwhite1290 I found it as well on their Facebook page but now my drop-down menu gets hidden behind the video banner
Hey, ive managed this all the way to the end but my 'block' is super long and goes on for ages until the next section. Any ideas?
go into the code and delete the extra space at the bottom
I just did everything you adressed in this video. The only problem that I experience is that it doesn't display on mobile. Do you know how to fix this issue?
i have the same problem
Would anyone know how to move the button down ?
How long does it take to be accepted into the group to get the code???
I just approved a few requests. If you haven't been approved yet, let me know which name you signed up under and I'll take a look :).
@@EcomGeeks Hi i just joined under Sam in the facebook goupd if you could please accept me :)
be great if the code was just posted since no one accepts the FB requests
what to do for mobile version most of the visit is from mobile version
100%! It is mobile friendly but if you need to customize anything for your mobile view, watch this video: ua-cam.com/video/W9yCnwLfqcY/v-deo.html
Is this Liquid or JSON? Shopify asks you to specify now. Pretty sure it's not JSON so I'm guessing Liquid 🤷♂
I'm wondering if there is code out there to change the position of the button over the banner. My button lands square on the product in my video. Any ideas are much appreciated!!
go into your edit code and sections, same place where you put the code. and find the button code and change to rounded square
When I coded it at first the video would play on IOS but stopped working a week after. Know a fix to this?
Love the video very informative! just waiting to be accepted into the Facebook group
I was trying as per your video. But I saw from footer email and column over lapped to my featured collection. Video background was showing in place of banner image. Can u please help me
How to have 2 background videos? one for the desktop version and one for the mobile version?
I’m just now seeing this video and I can’t get the code, are you still giving out the code?
Yes, go here: facebook.com/groups/ecomgeeks
Click on Files or use the search button to search "video". The files are called
video-bg-code-v1-1.txt & video-bg-code-v2-1.txt
GREAT GREAT VIDEO!
Thank you so much!
I set it all up properly but the video is not playing.
it keeps saying video format not supported, i even found the video you used of the girl in the dress and still not working cant upload the video? need help
Hello! I'e jumped on the Facebook page and requested to join. Still waiting for a response since two days ago.. is there any chance of adding the code here instead of making us wait while we get accepted into the private group ?
Right
Hey
Have you got the code?
and me!
Same here it doesnt play on mobile. Sometimes it will work on android but it never works on my iphone. Any fix for this? Any help would be greatly appreciated.
Hi i need updated code for video background .. can your share me the link
I can't find the file option in settings. Can someone help?
Thanks for this video, it was a huge help today! Nicely done.
Thank you so much! Glad to hear!
to bad the code is on the private fb page. i would like to use this now but i have to wait until an adnim give me access. been three days already.
i think there may have been an update because it is not working and im getting the following message: Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined.
Waiting for acceptance on FB to get the code?
Super helpful video. I'm waiting to be approved for your group. Aly
Thank you I just approved requests :).
I'm having a processing issue when I try to upload my video file, it's a .mp4 file. Do you know what this could be?
Hi, Is there anyway to access the code? Did anyone manage to access the code on this chat - as I'm not allowed on the Facebook. I really hope this is not spam?
We are working on a blog post containing the codes. I'll pin it at the top of this video when it is complete :).
@@EcomGeeks i dont have facebook either…is this code accessible somewhere else?
Hi! Thank you for the video. On the desktop it worked perfectly, but on my mobile i get the video with underneath it black screen. How can I solve this? Does someone knows?
Any solution?
Hey! Waiting to be approved - would you mind approving so I can get the code please?
did you get the code?
I got the video background but I don’t have the editing tool on the right. Can you tell us how to get it?
just zoom your chrome browser out to 70-80% the editing section will automatically appear on the right.
Great video!
Thank you!
If i switch to the mobile view the video goes over the left menuits overlaps
Thank you for bringing this to my attention. I updated the code to fix it, I've posted it in our FB Group: facebook.com/groups/ecomgeeks
My request is not getting approved, need to get the code😢
When you’re on a mobile site and you open the menu, the video is over the drop down menu. How do you fix this?
im having this problem too, did you figure it out?
@@MB-nh3rg i havent had the time but i'm thinking of looking at some other videos
I would imagine everyone is having this same issue. @Ecom Geeks
I don’t see the Facebook group😢 can someone send me the code.
Thank you! Just requested
You've been approved. Welcome!
This is the real owner of the code github.com/mrdexters1/videoBackground.liquid/blob/main/videoBackground.liquid
Hi where can I find the link? I didn’t find it in facebook
Hello, It was a success! However, my "Shop Now" button has disappeared. How do I get that back?
why does my video have such a long space
Hi there! Sorry, but there is any other way to get the code? I sent the notification to join facebook group, but i didn't get answer... Does the group still alive? Thanks!
I would like to know too!
How agree autoplay?
Thank you so much, this was extremely helpful
does anyone have the code? I still haven't been accepted into the facebook group. :/
How can I remove the video banner from product page ?
why i am getting too much space on bottom side i adjusted the padding setting stlll there is more space what to do please anyone sudsiest me
omg, how hard you guys did it with all this facebook traps, did apply for membership still waiting 😒
Why Facebook? What's the target audience of this video? Only 18% of GenZ uses Facebook. Wish the code was hyperlinked in pastebin, or simply un the description.
How can I remove the transparent white box?
can you download mp4 from canva? and upload?
I'm not familiar with Canva. We use pexels.com/ for free videos.
How long does it take to be accepted into the group
Just noticed that the video only shows in landscape mode when flipping the phone. Any suggestions?
TY for the video. Waiting to get access to the group and test the code. Regards
You are very welcome! I just approved requests :).
Thank you for the video! Very helpful ! IT WORKS GREAT ! Thank you so much for this !
same here.
I'm songlad I found this page! You've been an amazing help! Also just joiner your FB group
Thanks so much!
I have joined the facebook group but unfortunately ,I couldn't find the code yet, can you please share the link or the code itself here
hey - did you find the code ?
waiting to be approved in fb group, thank you (:
Done
why didn't you just put the code in the description :(
where is the code? I am confused
I’m not computer savvy I don’t understand how to get this code off of Facebook why does everything need a code with Shopify