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 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.
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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LUHWnz85Tuc.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.
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?
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.
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.....
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LUHWnz85Tuc.html
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, 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.
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 ! 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 ?
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"
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 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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.html
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! 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?
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?
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qzYp0MlrCDg.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!
Please checkout my latest video to see some tips to get the video working on mobile devices: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.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.
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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.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.
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
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?
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!
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 ""
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 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'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.
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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.html
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
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.html It has more tips related to mobile and fixing responsiveness issues.
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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.html If you are still having issues, let me know and I can try to help.
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?
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.
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?
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.
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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.html It's around 12:35 but I do suggest watching the whole video for some other tips
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.
******** 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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LUHWnz85Tuc.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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.html where I show how you can achieve that. It's around 12:35
@@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.
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.
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?
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 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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h2CFKOfnpZs.html
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
