Thanks so much for this video! I successfully installed the video on desktop. The preview in Shopify also showed how it looked on mobile. However, the video is not showing up on my iphone. It just shows a still from the video. I found a playsinline code which I added, but that didn't help. I tried several others that I found online, but still it only shows the still on my iphone. If you have an idea on how to solve this, I would really really love to hear it.
When you click on "Has a Background Video" how does it know which file to play? Did I miss the part where you explain how to link a video file to the image banner?
Thanks for the guide. Was truly helpful. I see a few comments mentioning issues with the responsiveness of the video. I have a quick and easy workaround you can take advantage of, instead of messing with and adjusting the CSS to fit the aspect ratio and size of the video. Create a transparent png in the same aspect ratio as the video you use for the background. In my case, my video is 21:9 format. So I created a transparent PNG in Photoshop, with the size 2100x900px to match the video. Lesser resolution would also do the trick, but for the sake of the explanation, I'll stick to the above. Upload and select your transparet 21:9 image in the "First image" image picker. Congratulations, you video is now 100% responsive, using the existing native Dawn theme CSS; without the need to add in extra CSS and tamper with the sizes.
You can also use this code at the very end: .media.video-background>*:not(.zoom):not(.deferred-media__poster-button) { object-fit: cover; } INSTEAD OF: .media.video-background>*:not(.zoom):not(.deferred-media__poster-button) { height: auto; } @media screen and (max-width: 749px) { .banner--large.video-background:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content { min-height: 27rem; } }
Thank you for this qualitative video. The way you explain and show at this rythm is perfect for beginners. Also I have noticed some differences in the code making the lines of march 2023 different from yours (probably shopify updates). If I could make a suggestion I would say to watch out for this in the upcoming months. Many thanks.
Hi! I'm glad you like the video. As for the difference in code, I already have a video published for the newer version. Here is the link: ua-cam.com/video/LUHWnz85Tuc/v-deo.html
Thanks from the video. Small production note, when pausing the video to examine / transcribe code that is located in the bottom of the video frame, it is often obscured by YT's video scubber... if you just always made sure lines being edited were centered that would be great.
******** IMPORTANT! PLEASE READ ************** --->> To get this working on mobile, add playsline attribute to the vide tag, so the tag will look like this: --->> Seeing Icons On Top of the Background? Over the lifetime of this video I have received this question multiple times, so thought I add this to my comment here. Please make sure you have the following code in image-banner.liquid file as I show in the video. and section.settings.video_background == false I believe some people just skip thru quickly and miss certain steps. Please follow the whole video carefully and check that you have not missed any of the steps. --->> Different Versions of Dawn Theme I have tested this code implementation with newer versions of Dawn theme, may be line numbers will vary but you should find the same code in the files as I show in the video. --->> Updated video for Dawn Theme Version 7 - 2023 ua-cam.com/video/LUHWnz85Tuc/v-deo.html -->> If you would like to use the banner section in other places and show other videos then you would want to pull the video url from a setting instead of hard coding it in the code like I show in the video. Please watch this video: ua-cam.com/video/h2CFKOfnpZs/v-deo.html where I show how you can achieve that. It's around 12:35
Hey Webmyster! This has been awesome for me, thanks. Now I want to add a separate video section on my homepage for a brand story further down the page, but when someone plays it, clicking play messes with your top video banner and makes it stop. Any suggestions to override this and make sure the banner doesn't stop moving? I've already added the 'playsinline' for mobile and it works great, but this is a new one. Youur videos are the best. Thanks ~
I tried to replicate your issue but I could not. For me 2 videos play simultaneously. Please give me a bit details on what device/browser you are seeing this issue on. Also, is your top video autoplay and the bottom one is not and the user has to click the play button on the video below? Regardless make sure to give your videos different ids. So if one is id="myVideo", make sure others have different ids. e.g id="myVideo2", id="myVideo3" etc
@@Webmyster Thanks so much, we ended up moving this section off of the homepage so my problem has disappeared, haha. But I do believe your advice with labeling the id was likely our issue, so we took notes in case we go back in that direction. Thanks again
hi, thanks for the great tutorial. everything is smooth except the adjusting of the width. even when I've used your trick to finding the width and height and inputed the right numbers. the grey banner won't go away!
If the only issue is the grey background that shows behind the video, try to add the following CSS to get rid of it. Let me know if this works out for you. .banner__media, .banner__media:after { background: none; }
@@Webmyster Having same problem - I believe it's because the video is not adapting to the height of the container. So using your mobile adjustments tips only makes the container adjust, not the video. I'm having this same problem - I need the height of video to meet the height of container (so video would be zoomed in/adjusted to accomplish this). Same way it auto adjusts for images. Can you help with this?
Great video! I had to change the mobile height to 21rem but otherwise works great. Is there a way to use an input or variable so my client can easily change the video out from the dog one without having to navigate the code? Did I miss that in the video?
thank you very much foe sucha great exsplanation, please can you help me as my mo4 video on home page does not have a spind and its very important foe me to have that sound on , please can you help me, many thanks
Great video thank you. Like some others I'm having a problem where the video doesn't crop on mobile, so there's a space below the video which is grey (because the overlay doesn't size with the video). Any suggestions to either resize the video or remove the overlay on mobile? Thank you.
Great tutorial! Is there any way you can confirm what is required to replace the actual video file I use? When I copy the link of the video from my files and paste it in the code, it does not have the v= and type= past the .mp4 file ext. Directly pasting the link results with no video showing on my banner section. Thanks in advance if you could help.....
Thank you so much for your video but i have a problem , i followed every step that you have explained but at the end on my video banner it shows me your video with dog , it doesn't show me my video!! what should i do?
You need to remove the link of my video from the code and use yours instead., look in the code where you pasted You will see it has a long link inside quotes, replace that with your video link. That should change it.
Hi, this is an amazing tutorial, I have followed all the instructions and added - But when I open my mobile browser it does not play the video. It shows the Play button on the video but it does not auto play. How do we get it to play on mobile browser?
Hi! Safari on a phone device or on a desktop? If phone that might be a different issue. You have to add the attribute playsinline in the code inside the video tag, I have this instruction in the comment pinned to that video. Or you can just watch this new updated video: ua-cam.com/video/LUHWnz85Tuc/v-deo.html
Hi Webmyster, would you able to show how file reference metafield works for video filetype. We can display different product videos in image with text block ?
Hi! I already did a video on showing videos in Image with Text, check it out: ua-cam.com/video/qzYp0MlrCDg/v-deo.html As for reading the url from the metafield. You should be able able to do that, just have to add metafield of type url and then connect the vide url field to the metafield. But some people might not know this, so I'll try to make a brief video on it. Thanks for the input!
Hi, thank's a lot for this tutorial I learned a lot but for me it doesn't work at all. Everything I've done is following your way, step by step but my video never appears... I've watched the 2 videos about that 3-4 times, comparing your code to mine and it never show up.. any help? Thank's in advance.
hey thank you first for this video but i have a stupid question.. how do i change the video clip? i can't see any option to chose the video.. do i have to add it in the add section under edit code?
Look around 3:50, where I add the code for In there replace the long path that shows in src="" with your video path. Make sure to keep the quotes and only replace the ........ path. I will be publishing a new video with some tips for the video which also includes managing this path video from the Customize area so stay tuned.
Hi ! On mobile view, there is tsill this grey banner below the video... can you show how to remove it on mobile devices juste how you did it here on desktop please ?
This is premium content right here!! I was trying to embed a video into a slideshow on my homepage but it only alows for images. Meaning, I wanted a banner/slideshow on my homepage with two image slides and a video slide. Is this possible at all? [using Dawn theme]. Thank you!
Great tutorial! However, I’m having trouble seeing what the code you’re pasting in! If we could get that code to paste in, it would be much easier for me! I have no problem following along, but the code is puzzling me!
Great video, very helpful! Quick question - I am noticing a placeholder image over my video. Where do i put the following code (is it on line 31, same as Dynamic class code to add in image-banner.liquid?): Code to hide placeholder image in image-banner.liquid: "and section.settings.video_background == false"
I would like to see the code and instructions for video slider , similar to this one but with either embedded assets or a notification of this code with slider videos?
This was super helpful! I managed to upload the video onto my webpage, however, I have the generic Shopify image with the glasses, watches, etc overlaid on top of the video? Any idea how to get rid of it? I think it's because I deleted the image so Shopify automatically adds their image as holding.
@@conniezyc So I understand, you said you uploaded the video. So is that image with glasses etc is showing on top of the video? or the video does not show at all. If not did you replace the video url in code with your video? At 3:40 where I paste some code starting with
@@Webmyster The image with the glasses etc is showing up on top of my video like an overlay. The video is one that I've uploaded myself but I'll double check the code again at the timestamp!
Please checkout my latest video to see some tips to get the video working on mobile devices: ua-cam.com/video/h2CFKOfnpZs/v-deo.html You might just have to add playsinline code to the video tag. I still suggest to watch the video for some other tips too.
Can you make an vide where you show how to make an autoslide slideshow in shopify?There is also an ready theme for free called refresh in shopify, but it dont do autoslide
You need to replace the path of the video with your own video path. Or You can checkout this video: ua-cam.com/video/h2CFKOfnpZs/v-deo.html At the end I show how you can add a setting so you can specify video path in the customizer for the section and you dont need to update in the code.
Hello Webmyster! thank you so much for the help! im pretty new to coding and I've been trying to figure out how to make the new image banner section I added adapt to every screen size. hope you could help me out. thank you so much!
Can you explain a bit more, what issue are you having? Are you using a video as a background as explained in this video and it does not adapt to screen size?
Great video! I implemented everything but now my video banner text is not centered with the rest of the page.. any idea on how to get it back centered?
Hi Ahriana, that should not have happened. In the video I also have the text as center aligned. Are you using the Dawn theme? If yes, were there any other customizations done to it prior to these changes? I do suggest if you have not already, please go thru each code change again. Sometimes just a minor change as an extra space or a missing space can cause issues.
Hi, I'm sorry can you please explain a bit more. I'm not sure what you mean by " image behive", may be you mean the way the image banner image acts? If thats what you mean, you cannot have a video behave like a responsive image. That responsive image has a number of different sizes that are being loaded based on screen size. Something similar can be achieved but in that case you will have to add media queries to the CSS file and then you will be stuck with the image banner always showing the same video. Easiest way is to just pick one video, and play adjust the CSS for positioning.
In the code where you see this: Your browser does not support HTML5 video. Replace cdn.shopify.com/s/files/1/0582/5000/2628/files/happy-dog-outdoor.mp4?v=1646765486 inside quotes with the path of your video. Make sure to not delete quotes ""
If you follow the tips in the video where I show how to play around and add code (media queries), you should be able to get it working on mobile also. Also, not sure if you have watched this video: ua-cam.com/video/h2CFKOfnpZs/v-deo.html It has more tips related to mobile and fixing responsiveness issues.
Hi Eddie, it has worked for so many people. Most people had issues on mobile but not desktop (I addressed those issues in a different video. Look for part 2, it is linked in the description). You must have missed something. Please check again
This method does not work for IOS devices, the video does not play. The video also does not auto-size when transitioning from desktop to mobile. Is there a way to fix this? Cheers!
I believe I show how you can play around and add media queries to get the video working on different screen sizes. As for IOS devices, please watch this video of mine. It explains the issue about mobile devices plus some other tips that might be helpful. ua-cam.com/video/h2CFKOfnpZs/v-deo.html If you are still having issues, let me know and I can try to help.
How to change the height of the video? I would like to have it a bit bigger than what it is already but when I change the min height the grey box appears again.
There is a way to hide the gray box but then you will have extra white space. Have you seen my other video? I have some other tips in there. ua-cam.com/video/h2CFKOfnpZs/v-deo.html
hi webmyster, I have done everything correctly and my video is playing on the desktop automatically. However, for mobile i have to click play for the video to start. Do you have a snippet of code to fix this issue?
You would want to pull the url from a setting instead of hard coding it. Please watch this video. I show how you can do that alone with some other tips. ua-cam.com/video/h2CFKOfnpZs/v-deo.html It's around 12:35 but I do suggest watching the whole video for some other tips
Thank you very much, Webmyster! I successfully implemented everything but it seems the video only loops on certain browsers for me (most importantly, I got it working on mobile with the addition of 'playsinline', but it only works on chrome and not safari). Any suggestions for Safari? Much appreciated!
@@Webmyster I'm having the same problem, I have iphone pro 13 and the video is not playing at all. Not chrome or safari. EDIT: It works now on both browsers.
I really hope you get this message :( Okay so I have done everything in the video. On mobile it looks perfect, but in desktop view and full screen the video is zoomed in and I can't figure out how to get it to fit right. I have tried adding in more css at a larger scale but i'm doing something wrong. Please help..
oh I'm really sorry to hear that. Most people have issues on the mobile devices. Please send me a screenshot of the zoomed in issue at webmyster1@gmail.com. Also, what version of dawn theme are you using? And was there other customizations done to the theme before?
Hello this was so complicated to me nd you were talking so low. Can you please do a better quality video about this for people who are EXTREMELY NEW AT THIS?
I apologize about the sound quality but I'll be very true. If you are totally new to this, please get someone else to do this for you. It is not meant to be for total beginners. I always make the video with the minimal code changes needed to achieve the goal so don't think it can be any simpler.
Hello sir, I did the codes exactly as you mentioned as well as the trick you showed in the end but the additional grey area is still appearing in the mobile view
Hi Sameer, did you follow my tips where I show how you can play around in the dev tool to get the right values for CSS? If you copy exactly my CSS, it will most probably not work for your video because your video might have different dimensions.
@@Webmyster yes sir, I even followed the second video but it just didn't work for mobile view. actually i did the exact steps, even played with the dev tool but there was a grey part still there no matter what in the mobilel view No issues I will try some other customizations from your channel.
@@Webmyster It's the video that is not adapting to the height of the container. So using your mobile adjustments tips only makes the container adjust, not the video. I'm having this same problem - I need the height of video to meet the height of container (so video would be zoomed in/adjusted to accomplish this). Same way it auto adjusts for images.
Hi bro, I really don'd understand nothing about coding. Can you repeat the same video, but in a detailed and easy way? This really will help me and many people thank you.
Hi! Can you explain to me, if I remade the video, how do I make it better so you or anyone else that has never touched the code will understand it better? You might not believe that even with my current style I get complaints that I am explaining it too slow. There are some people that want to get to the point and I do understand that these people probably have some experience with coding. When I started these customization videos, my thought was that these will be intended towards people that are not scared to touch the code or have some experience with it. If it is someone that has absolutely never touched the code, I know it can be difficult. But I appreciate your input and please help me understand so I can make better content for beginners. Thank you!
@@Webmyster bror, this is just dropshiping. I just hope that you will make videos dedicated to people who work in buying and selling on Internet to improve their sites easier and faster until things develop.
Did you see the part of the video where I give tips to make adjustments to the width? I knew it is possible that the same numbers might not work for some video dimensions so I gave some tips how you can adjust those widths in the CSS media queries to make that code work for you.
@@MrDiyar2660 so you are saying even if you adjust the widths as show in the video, you still have an issue on your Mac? There could be a safari specific issue. I will check on my Mac machine.
I have not upgraded to Dawn 5.0 but I am looking into making some videos for Dawn 5.0. Not sure what they changed related to the banner, I'll take a look.
So I made the same changes shown this video to Dawn 5.0 and they seem to be working for me. My video background is showing exactly like it does on Dawn 3.0 Can you please tell me specifically what issues are you facing in regards to the video? It does not show at all or had dimension issues? etc.
Did you follow the tips I show starting at 7:38 ? You can follow the same process to adjust those values so your video looks good. I also have another video that has more tips about mobile screen sizes and some other stuff so please check it out: ua-cam.com/video/h2CFKOfnpZs/v-deo.html
I have not tested this across different browsers and devices but you can give it a try. Add this to the video tag in the code: poster="placeholder.png" So the beginning of the tag would look something like: ofcourse, you need to replace placeholder.png with the path of your image.
You can but some themes might require different code and the places I show in the video where you add code might be different. You could give it a try on a backup theme and see how it works out.
I was going to follow these directions, but after reading the comments, I feel like it would be nice if you could do an updated version of this, where you address the video issue, the grey background and other that are mentioned in the comments. Is it possible?
I believe it is showing an error and not letting you save? Please check carefully you might have missed something. Sometimes as little as adding or misplacing a dot in the code can break the code
Sorry about that. I was doing 500 things at once. I meant to say that it wouldnt let me save and said there was an error. I copied and paste the code and followed the instructions throughly, and still recieving an error message.
@ Hey, it worked, but it doesn’t auto play at all on mobile devices (there is a play button, but if you press it it doesn’t play either) You know how can I remove the play button on the mobile devices and let it play automatically? I will appreciate any help🙏🏼 @webmyster
![Shopify Store Best Practices [Dawn Theme]](http://i.ytimg.com/vi/es3GuN8IzVs/mqdefault.jpg)
Thanks so much for this video! I successfully installed the video on desktop. The preview in Shopify also showed how it looked on mobile. However, the video is not showing up on my iphone. It just shows a still from the video. I found a playsinline code which I added, but that didn't help. I tried several others that I found online, but still it only shows the still on my iphone. If you have an idea on how to solve this, I would really really love to hear it.
When you click on "Has a Background Video" how does it know which file to play? Did I miss the part where you explain how to link a video file to the image banner?
Thanks for your videos; I find your videos truly helpful and help my website become more professional and trustworthy!
Thanks for the guide. Was truly helpful. I see a few comments mentioning issues with the responsiveness of the video.
I have a quick and easy workaround you can take advantage of, instead of messing with and adjusting the CSS to fit the aspect ratio and size of the video.
Create a transparent png in the same aspect ratio as the video you use for the background.
In my case, my video is 21:9 format. So I created a transparent PNG in Photoshop, with the size 2100x900px to match the video. Lesser resolution would also do the trick, but for the sake of the explanation, I'll stick to the above.
Upload and select your transparet 21:9 image in the "First image" image picker.
Congratulations, you video is now 100% responsive, using the existing native Dawn theme CSS; without the need to add in extra CSS and tamper with the sizes.
Is this just a totally blank & transparent png file?
You can also use this code at the very end:
.media.video-background>*:not(.zoom):not(.deferred-media__poster-button) {
object-fit: cover;
}
INSTEAD OF:
.media.video-background>*:not(.zoom):not(.deferred-media__poster-button) {
height: auto;
}
@media screen and (max-width: 749px) {
.banner--large.video-background:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 27rem;
}
}
@media screen and (min-width: 750px) {
.banner--large.video-background:not(.banner--adapt) {
min-height: 39rem;
}
}
@media screen and (min-width: 990px) {
.banner--large.video-background:not(.banner--adapt) {
min-height: 52rem;
}
}
@media screen and (min-width: 1320px) {
.banner--large.video-background:not(.banner--adapt) {
min-height: 62rem;
}
}
Thank you for this qualitative video. The way you explain and show at this rythm is perfect for beginners. Also I have noticed some differences in the code making the lines of march 2023 different from yours (probably shopify updates). If I could make a suggestion I would say to watch out for this in the upcoming months. Many thanks.
Hi! I'm glad you like the video. As for the difference in code, I already have a video published for the newer version. Here is the link:
ua-cam.com/video/LUHWnz85Tuc/v-deo.html
@@Webmyster I will have a look, thanks!
@@Webmyster Sir you are great persone i like all the videos
Thank you so much for this video. Searched far and wide to avoid paying for an expensive theme to accommodate a video background
Saying this, video doesn't play on mobile when publish
You still having issues with video not playing on mobile for you?
@@Webmyster Never mind, solved from comment below! Thanks
Thanks from the video. Small production note, when pausing the video to examine / transcribe code that is located in the bottom of the video frame, it is often obscured by YT's video scubber... if you just always made sure lines being edited were centered that would be great.
Thanks for the input, I'll keep that in mind.
Thank you very very much for this helpful tutorial!!!
hey, thank you for the help!
Did have a question.. My image banner has a grey bar on the right, how can I fix this?
******** IMPORTANT! PLEASE READ **************
--->> To get this working on mobile, add playsline attribute to the vide tag, so the tag will look like this:
--->> Seeing Icons On Top of the Background?
Over the lifetime of this video I have received this question multiple times, so thought I add this to my comment here. Please make sure you have the following code in image-banner.liquid file as I show in the video.
and section.settings.video_background == false
I believe some people just skip thru quickly and miss certain steps.
Please follow the whole video carefully and check that you have not missed any of the steps.
--->> Different Versions of Dawn Theme
I have tested this code implementation with newer versions of Dawn theme, may be line numbers will vary but you should find the same code in the files as I show in the video.
--->> Updated video for Dawn Theme Version 7 - 2023
ua-cam.com/video/LUHWnz85Tuc/v-deo.html
-->> If you would like to use the banner section in other places and show other videos then you would want to pull the video url from a setting instead of hard coding it in the code like I show in the video.
Please watch this video: ua-cam.com/video/h2CFKOfnpZs/v-deo.html where I show how you can achieve that. It's around 12:35
Thank you very much for sharing!
Please which section are we to add this playsline?
2. How do we change this video to a video of our choice?
@@isio6542 Inside the video tag. Here is what the final video tag should look like:
Your browser does not support HTML5 video.
replace that YourVideoUrl with the link to your video file
@@Webmyster the video is working and the background is away but not on the mobile version only on desktop is the background away
I am sorry. But what do you mean by video tag? Where can I find it? Thanks!
Nice tutorial for video banner.
Hey Webmyster! This has been awesome for me, thanks. Now I want to add a separate video section on my homepage for a brand story further down the page, but when someone plays it, clicking play messes with your top video banner and makes it stop. Any suggestions to override this and make sure the banner doesn't stop moving? I've already added the 'playsinline' for mobile and it works great, but this is a new one. Youur videos are the best. Thanks ~
I tried to replicate your issue but I could not. For me 2 videos play simultaneously. Please give me a bit details on what device/browser you are seeing this issue on. Also, is your top video autoplay and the bottom one is not and the user has to click the play button on the video below? Regardless make sure to give your videos different ids. So if one is id="myVideo", make sure others have different ids. e.g id="myVideo2", id="myVideo3" etc
@@Webmyster Thanks so much, we ended up moving this section off of the homepage so my problem has disappeared, haha. But I do believe your advice with labeling the id was likely our issue, so we took notes in case we go back in that direction. Thanks again
Great video, thanks! What code would you use in Dawn 13? How would you specify if you wanted a different video on mobile?
hi, thanks for the great tutorial. everything is smooth except the adjusting of the width. even when I've used your trick to finding the width and height and inputed the right numbers. the grey banner won't go away!
If the only issue is the grey background that shows behind the video, try to add the following CSS to get rid of it. Let me know if this works out for you.
.banner__media, .banner__media:after {
background: none;
}
@@Webmyster Having same problem - I believe it's because the video is not adapting to the height of the container. So using your mobile adjustments tips only makes the container adjust, not the video. I'm having this same problem - I need the height of video to meet the height of container (so video would be zoomed in/adjusted to accomplish this). Same way it auto adjusts for images. Can you help with this?
Hi, I have applying same method but the video on mobile are play correctly on Android but not not iPhone devices can you answer on?
This tutorial was super helpful! Do you know how to code an “enable swipe on desktop” option on the multicolumn element on Dawn? Thanks in advance 👍🏼
I'm sure I can but it's just a matter of how much effort it takes and if I can easily explain in a video. I will take a look for you.
@@Webmyster I've seen some people inside the Shopify support forum with the same issue without a response. Thanks again!
@@heymeneses ok thanks for the input
Is this what you were looking for: ua-cam.com/video/szkhN249qBY/v-deo.html
this is some good stuff
Nice video, thanks!
Great video! I had to change the mobile height to 21rem but otherwise works great. Is there a way to use an input or variable so my client can easily change the video out from the dog one without having to navigate the code? Did I miss that in the video?
thank you very much foe sucha great exsplanation, please can you help me as my mo4 video on home page does not have a spind and its very important foe me to have that sound on , please can you help me, many thanks
Great video thank you. Like some others I'm having a problem where the video doesn't crop on mobile, so there's a space below the video which is grey (because the overlay doesn't size with the video). Any suggestions to either resize the video or remove the overlay on mobile? Thank you.
Hi Rich, Watch this video. It has more tips to get the video working on mobile and some more in general
ua-cam.com/video/h2CFKOfnpZs/v-deo.html
Great tutorial! Is there any way you can confirm what is required to replace the actual video file I use? When I copy the link of the video from my files and paste it in the code, it does not have the v= and type= past the .mp4 file ext. Directly pasting the link results with no video showing on my banner section. Thanks in advance if you could help.....
Followed the instructions and it keeps saying its an error..... I give-up
Thank you so much for your video but i have a problem , i followed every step that you have explained but at the end on my video banner it shows me your video with dog , it doesn't show me my video!! what should i do?
You need to remove the link of my video from the code and use yours instead., look in the code where you pasted You will see it has a long link inside quotes, replace that with your video link. That should change it.
Hi, this is an amazing tutorial, I have followed all the instructions and added - But when I open my mobile browser it does not play the video. It shows the Play button on the video but it does not auto play. How do we get it to play on mobile browser?
Hi Tyler, please read my pinned comment above. Add that attribute and that should fix the issue on mobile
Hey thank you for the video! I have a problem with the display on Safari - the video doesn't play at all, can you help please?
Hi! Safari on a phone device or on a desktop? If phone that might be a different issue. You have to add the attribute playsinline in the code inside the video tag, I have this instruction in the comment pinned to that video. Or you can just watch this new updated video:
ua-cam.com/video/LUHWnz85Tuc/v-deo.html
Hi Webmyster, would you able to show how file reference metafield works for video filetype. We can display different product videos in image with text block ?
Hi! I already did a video on showing videos in Image with Text, check it out:
ua-cam.com/video/qzYp0MlrCDg/v-deo.html
As for reading the url from the metafield. You should be able able to do that, just have to add metafield of type url and then connect the vide url field to the metafield. But some people might not know this, so I'll try to make a brief video on it.
Thanks for the input!
Hi, thank's a lot for this tutorial I learned a lot but for me it doesn't work at all.
Everything I've done is following your way, step by step but my video never appears... I've watched the 2 videos about that 3-4 times, comparing your code to mine and it never show up.. any help? Thank's in advance.
hey thank you first for this video but i have a stupid question.. how do i change the video clip? i can't see any option to chose the video.. do i have to add it in the add section under edit code?
Look around 3:50, where I add the code for In there replace the long path that shows in src="" with your video path. Make sure to keep the quotes and only replace the ........ path. I will be publishing a new video with some tips for the video which also includes managing this path video from the Customize area so stay tuned.
Hi ! On mobile view, there is tsill this grey banner below the video... can you show how to remove it on mobile devices juste how you did it here on desktop please ?
This is premium content right here!! I was trying to embed a video into a slideshow on my homepage but it only alows for images. Meaning, I wanted a banner/slideshow on my homepage with two image slides and a video slide. Is this possible at all? [using Dawn theme]. Thank you!
Yes it is possible but will take quite a bit of customization to the slideshow section.
Great tutorial! However, I’m having trouble seeing what the code you’re pasting in! If we could get that code to paste in, it would be much easier for me! I have no problem following along, but the code is puzzling me!
Great video, very helpful! Quick question - I am noticing a placeholder image over my video. Where do i put the following code (is it on line 31, same as Dynamic class code to add in image-banner.liquid?):
Code to hide placeholder image in image-banner.liquid:
"and section.settings.video_background == false"
I would like to see the code and instructions for video slider , similar to this one but with either embedded assets or a notification of this code with slider videos?
thanks!
Welcome!
All done I just can’t add text to my video banner. And it shows the play button when editing my website but not when viewing
This was super helpful! I managed to upload the video onto my webpage, however, I have the generic Shopify image with the glasses, watches, etc overlaid on top of the video? Any idea how to get rid of it? I think it's because I deleted the image so Shopify automatically adds their image as holding.
You should be able to hide that image. What version of Dawn theme are you using?
@@Webmyster I'm using Dawn 5.0.0 - where can I find where to hide it? Thank you so much for your reply!
@@conniezyc So I understand, you said you uploaded the video. So is that image with glasses etc is showing on top of the video? or the video does not show at all. If not did you replace the video url in code with your video? At 3:40 where I paste some code starting with
@@Webmyster The image with the glasses etc is showing up on top of my video like an overlay. The video is one that I've uploaded myself but I'll double check the code again at the timestamp!
@@conniezyc I have the same issue with the overlay. Did you manage to resolve this?
Hi my image banner is croped when viewed in 4k screen ☹
Hy Webmyster, are you doing that stuff as a paid service? Please lat me know...Thanks
This is an amazing and precise video... However I am having one issue... My video doesn't seem to be playing on mobile
Please checkout my latest video to see some tips to get the video working on mobile devices: ua-cam.com/video/h2CFKOfnpZs/v-deo.html
You might just have to add playsinline code to the video tag. I still suggest to watch the video for some other tips too.
Can this work with 2 different videos and video banners?
I desperately need help. I am lost, how can I change the white dog video into my own uploaded video?
You need to replace that video url in the code with your video url. The code that I show that starts with
Can you make an vide where you show how to make an autoslide slideshow in shopify?There is also an ready theme for free called refresh in shopify, but it dont do autoslide
great vid. was doing everything great, but how im changing the video ?
You need to replace the path of the video with your own video path. Or You can checkout this video: ua-cam.com/video/h2CFKOfnpZs/v-deo.html
At the end I show how you can add a setting so you can specify video path in the customizer for the section and you dont need to update in the code.
Hello Webmyster! thank you so much for the help! im pretty new to coding and I've been trying to figure out how to make the new image banner section I added adapt to every screen size. hope you could help me out. thank you so much!
Can you explain a bit more, what issue are you having? Are you using a video as a background as explained in this video and it does not adapt to screen size?
hey i have a problem can you please help me
does this still work in the current dawn 12.0 theme?
amazing
Great video! I implemented everything but now my video banner text is not centered with the rest of the page.. any idea on how to get it back centered?
Hi Ahriana, that should not have happened. In the video I also have the text as center aligned. Are you using the Dawn theme? If yes, were there any other customizations done to it prior to these changes? I do suggest if you have not already, please go thru each code change again. Sometimes just a minor change as an extra space or a missing space can cause issues.
Hi exmple is great! thanks!
how can i position center height and center width + cropping from the middle like the image behive?
Hi, I'm sorry can you please explain a bit more. I'm not sure what you mean by " image behive", may be you mean the way the image banner image acts? If thats what you mean, you cannot have a video behave like a responsive image. That responsive image has a number of different sizes that are being loaded based on screen size. Something similar can be achieved but in that case you will have to add media queries to the CSS file and then you will be stuck with the image banner always showing the same video. Easiest way is to just pick one video, and play adjust the CSS for positioning.
hi, how can I put my video at the background, cause y do all the steps and I see in my shop the dog video
In the code where you see this:
Your browser does not support HTML5 video.
Replace cdn.shopify.com/s/files/1/0582/5000/2628/files/happy-dog-outdoor.mp4?v=1646765486 inside quotes with the path of your video. Make sure to not delete quotes ""
Because on the cell phone the size is different, can you help me?
If you follow the tips in the video where I show how to play around and add code (media queries), you should be able to get it working on mobile also. Also, not sure if you have watched this video: ua-cam.com/video/h2CFKOfnpZs/v-deo.html
It has more tips related to mobile and fixing responsiveness issues.
bro, can i pay you to do this for me?
Can you plzz make a video how to add slideshow banner to dawn theme
This doesn't work. :( I just get a blank box where the video should be. Checked all code and it's indentical to yours minus the video file link.
Hi Eddie, it has worked for so many people. Most people had issues on mobile but not desktop (I addressed those issues in a different video. Look for part 2, it is linked in the description). You must have missed something. Please check again
This method does not work for IOS devices, the video does not play. The video also does not auto-size when transitioning from desktop to mobile. Is there a way to fix this? Cheers!
I believe I show how you can play around and add media queries to get the video working on different screen sizes. As for IOS devices, please watch this video of mine. It explains the issue about mobile devices plus some other tips that might be helpful.
ua-cam.com/video/h2CFKOfnpZs/v-deo.html
If you are still having issues, let me know and I can try to help.
How to change the height of the video? I would like to have it a bit bigger than what it is already but when I change the min height the grey box appears again.
There is a way to hide the gray box but then you will have extra white space. Have you seen my other video? I have some other tips in there. ua-cam.com/video/h2CFKOfnpZs/v-deo.html
hi webmyster, I have done everything correctly and my video is playing on the desktop automatically. However, for mobile i have to click play for the video to start. Do you have a snippet of code to fix this issue?
Please check my pinned comment.
What If I want to do the same thing in a second image banner down the page?
You would want to pull the url from a setting instead of hard coding it. Please watch this video. I show how you can do that alone with some other tips. ua-cam.com/video/h2CFKOfnpZs/v-deo.html
It's around 12:35 but I do suggest watching the whole video for some other tips
@@Webmyster Will do. I appreciate your time, Thank you!
Thank you for your upload by a chance has anyone else had issue with video freezing?
Can you please give me a bit more details. Does the video not play at all or does it play and freezers after a while?
@@Webmyster The video plays but it's a huge delay in load time and the video freezes alot. I appreciate the info forsure!
Thank you very much, Webmyster! I successfully implemented everything but it seems the video only loops on certain browsers for me (most importantly, I got it working on mobile with the addition of 'playsinline', but it only works on chrome and not safari). Any suggestions for Safari? Much appreciated!
hmmm that's odd. I have an iphone and thought I tested it on Safari. I will take a look again.
@@Webmyster I'm having the same problem, I have iphone pro 13 and the video is not playing at all. Not chrome or safari. EDIT: It works now on both browsers.
@@katezeller4795 I'm glad you got it to work!
I really hope you get this message :( Okay so I have done everything in the video. On mobile it looks perfect, but in desktop view and full screen the video is zoomed in and I can't figure out how to get it to fit right. I have tried adding in more css at a larger scale but i'm doing something wrong. Please help..
I'm like 12 hours in now trying to get it to not zoom lol..
oh I'm really sorry to hear that. Most people have issues on the mobile devices. Please send me a screenshot of the zoomed in issue at webmyster1@gmail.com. Also, what version of dawn theme are you using? And was there other customizations done to the theme before?
How do we add this to a slideshow element rather than an image banner! Please I need this!
So I understand. You need a slideshow of videos?
Hello this was so complicated to me nd you were talking so low. Can you please do a better quality video about this for people who are EXTREMELY NEW AT THIS?
I apologize about the sound quality but I'll be very true. If you are totally new to this, please get someone else to do this for you. It is not meant to be for total beginners. I always make the video with the minimal code changes needed to achieve the goal so don't think it can be any simpler.
thanks for the tutorial, does that work for mobile browser?
If you see it is not playing on mobile browser, add playsinline in the video tag, so your video tag will look like:
@@Webmyster This worked for me, thank you for your help!
@@Webmyster hey where do i find my video tag to input code for video banner to work on mobile
It says i cant upload mp4 files on free plan, how did to manage go make that work?
So you are using the trial plan? I'm sorry if that is a restriction from Shopify then there is no way around it.
I tired this and it worked perfectly on a laptop or desktop but it doesn’t play the video on mobile. How do I fix that bug ?
Add playsinline as an attribute to the video tag. I believe I pinned a comment on this video about it.
@@Webmyster thanks man! I watched the other video and now it’s playing on mobile. 🤝🏾
Hello sir, I did the codes exactly as you mentioned as well as the trick you showed in the end but the additional grey area is still appearing in the mobile view
Hi Sameer, did you follow my tips where I show how you can play around in the dev tool to get the right values for CSS? If you copy exactly my CSS, it will most probably not work for your video because your video might have different dimensions.
@@Webmyster yes sir, I even followed the second video but it just didn't work for mobile view. actually i did the exact steps, even played with the dev tool but there was a grey part still there no matter what in the mobilel view No issues I will try some other customizations from your channel.
@@sameerkhan6234 Hi Sameer, send me a screen shot to my email. webmyster1@gmail.com and I will try to help you.
Really helpful. Can you make same video for Image with text? It would be really helpfull.
Sure, I'm planning on creating some new content. So I will consider it. Thank you.
Took me a while to finally do this video. If you are still interested checkout: ua-cam.com/video/qzYp0MlrCDg/v-deo.html
i have a question on the mobile version it has also the background dimensions how can i fix this ?
Hi! not sure what you mean by "it has also the background dimensions". Can you please explain a bit more?
@@Webmyster It's the video that is not adapting to the height of the container. So using your mobile adjustments tips only makes the container adjust, not the video. I'm having this same problem - I need the height of video to meet the height of container (so video would be zoomed in/adjusted to accomplish this). Same way it auto adjusts for images.
Hi bro, I really don'd understand nothing about coding. Can you repeat the same video, but in a detailed and easy way? This really will help me and many people thank you.
Hi! Can you explain to me, if I remade the video, how do I make it better so you or anyone else that has never touched the code will understand it better? You might not believe that even with my current style I get complaints that I am explaining it too slow. There are some people that want to get to the point and I do understand that these people probably have some experience with coding.
When I started these customization videos, my thought was that these will be intended towards people that are not scared to touch the code or have some experience with it. If it is someone that has absolutely never touched the code, I know it can be difficult. But I appreciate your input and please help me understand so I can make better content for beginners.
Thank you!
@@Webmyster bror, this is just dropshiping. I just hope that you will make videos dedicated to people who work in buying and selling on Internet to improve their sites easier and faster until things develop.
Hi, i have a problem regarding the size of the video. It does not completely fit with phone and laptop?
Did you see the part of the video where I give tips to make adjustments to the width? I knew it is possible that the same numbers might not work for some video dimensions so I gave some tips how you can adjust those widths in the CSS media queries to make that code work for you.
@@Webmyster yes but i think it is different for me as i am using Mac iOS
@@MrDiyar2660 so you are saying even if you adjust the widths as show in the video, you still have an issue on your Mac? There could be a safari specific issue. I will check on my Mac machine.
@@Webmyster hi again. My bad - i fixed it
@@MrDiyar2660 Glad to hear you got it working!
Cant seem to get this to work on the new Dawn 5.0 Update Any updates on having it work on this new update?
I have not upgraded to Dawn 5.0 but I am looking into making some videos for Dawn 5.0. Not sure what they changed related to the banner, I'll take a look.
So I made the same changes shown this video to Dawn 5.0 and they seem to be working for me. My video background is showing exactly like it does on Dawn 3.0 Can you please tell me specifically what issues are you facing in regards to the video? It does not show at all or had dimension issues? etc.
Hi, how do I make it responsive? ??
Did you follow the tips I show starting at 7:38 ? You can follow the same process to adjust those values so your video looks good. I also have another video that has more tips about mobile screen sizes and some other stuff so please check it out: ua-cam.com/video/h2CFKOfnpZs/v-deo.html
Is there a way to add a cover photo?
I have not tested this across different browsers and devices but you can give it a try. Add this to the video tag in the code:
poster="placeholder.png"
So the beginning of the tag would look something like:
ofcourse, you need to replace placeholder.png with the path of your image.
Can you do this with any theme? Thanks!
You can but some themes might require different code and the places I show in the video where you add code might be different. You could give it a try on a backup theme and see how it works out.
how do i change the video?
Replace the video url with your video url or watch this video for details. ua-cam.com/video/LUHWnz85Tuc/v-deo.html
Hi my friend, it works insane on computer but on mobile the video is not running automatically
Please add playsinline in the video tag and see if that works for you. So your video tag beginning will look like this:
@@Webmyster still doesnt auto play. have to tap the play button for it to start playing
I was going to follow these directions, but after reading the comments, I feel like it would be nice if you could do an updated version of this, where you address the video issue, the grey background and other that are mentioned in the comments. Is it possible?
I made part 2 of it a while back. Did you see this one? ua-cam.com/video/h2CFKOfnpZs/v-deo.html
It would let me saved after placing the code in the placeholder. I did it step by step
I believe it is showing an error and not letting you save? Please check carefully you might have missed something. Sometimes as little as adding or misplacing a dot in the code can break the code
Sorry about that. I was doing 500 things at once.
I meant to say that it wouldnt let me save and said there was an error. I copied and paste the code and followed the instructions throughly, and still recieving an error message.
@@Webmyster nevermind i got it to work it was all on me lol. Thank you this helped a lot!!!
@
Hey, it worked, but it doesn’t auto play at all on mobile devices (there is a play button, but if you press it it doesn’t play either)
You know how can I remove the play button on the mobile devices and let it play automatically?
I will appreciate any help🙏🏼
@webmyster
Sorry for the delayed response. Were you able to solve this issue?
Video is not working on mobile phone. DO you know how an i fix this? @webmyster
Please read the pinned comments on this video. You need to add the playsinline attribute to the video tag code