How To Add A Video Banner On Shopify With Autoplay

[@brhutchinson8870]

You are awesome. I never comment on video's, but this one deserves a compliment

[@amine-ammari]

Thank you! If you have any other topic suggestions please let me know!

[@RashardPaxtonDawson]

Your videos are so helpful and easy to understand!!! Please keep it up!!!

[@amine-ammari]

Thanks for the feedback!

[@MetalHeadSnoopy]

Ammaaaaazing video thank you!

[@mihai99ish]

Thank you for your help! How can I make the button to respect the Theme settings? I would like all the buttons in my store to be the same.

[@amine-ammari]

Ask chat gpt to generate some css code to style the anchor tag according to your requirements then paste the code in custom CSS part of the section settings

[@flynngrey6791]

Hey, really appreciate this. Thanks alot! Minor issue/question: In my store there is an uneven gap between the menu drop-downs at the top, and the top of the video. Is there a way to bring the video higher? Thanks again!

[@amine-ammari]

Check the settings of the section there maybe a way to add more space I don't remember well If you can't find it you will need to write some css code Send the code section to chat gpt and ask it

[@M.E.O_]

I Have to say i had to search a little bit because there werent suitable solutions but YOUR CODE is covering all issues !!! THANK YOU AMINE :)

[@Maestro170]

Thank you so much for this video. That was the only useful video about this topic I was able to find youtube

[@6476tyujhfg]

this was perfect and amazing and way easier than I thought!! thank you for your code!

[@NotiziaDesigns]

Thank you very much for the videos you make!! they are AMAZING, the best ones! Please keep it up :)

[@koko9830835481]

So helpful and easy to understand. Thanks a lot & Please keep it up!!!

[@OlekaSwim]

Awesome video. Simple and straight to the point. I got exactly what I was looking for, without paying for it!!! Thank you so much!!!

[@amine-ammari]

🔥🔥💪🏼💪🏼

[@Attaboyhair]

Great video! Is there a way to move the button lower on the section or is it fixed to that position only? Thanks

[@amine-ammari]

You will need to write code to move it

[@soultribeawakeningmeetingr4816]

Hi ! Thanks for sharing it. But the KZbin is not running when we are using your code.

[@amine-ammari]

I apologize for that there are some features that may not work on all themes

[@LiamKillen]

Excellent thank you ! :-)

[@ShoneTheGenije]

Nice one. I would just suggest using Vh for banner height an some relative unit for heading at least. Em for example.

[@amine-ammari]

Thanks for the suggestion. I just used pixels since most users aren't technical ones and are more familiar with px

[@ShoneTheGenije]

@@amine-ammari Yes I know. However, VH is really not hard to explain to average user and is more useful.

[@MaryamParkar-x6s]

Hello!! Thanks for the video. I had a transparent header, and the text on the desktop shows perfectly I loved it but with mobile, the text goes behind the menu and logo. How do I adjust it?

[@amine-ammari]

I have a video for the transparent header, did you follow it?

[@MaryamParkar-x6s]

@@amine-ammari No, I actually got that code from the Shopify community on google. I will try your video. And see how it goes. If I face the same problem I will let you know. Thanks for replying.

[@CarolinedeTesta]

YOU ARE AMAZING!! Perfect code ! Thank you very much for your ressource!

[@CarolinedeTesta]

I just have one question, the video on destkop plays in autoplay, it's perfect, but not on mobile, would it be possible for the video to play automatically on the mobile version? Thank you

[@MRASAADASAAD]

very very good video i have trying to do thus for the last 3 hours is very good

[@arcane970]

Hello. This works perfectly just what I was looking for! One question, my video backround is white but I do believe there is some kind of overlay because now my video backround has changed colour and I cant change it. I believe there is some kind of overlay in code or something. Do you think you can help me with that?

[@amine-ammari]

Yes there is an overlay but you will need to hire a dev to adjust it You can reach out here amineammari.com/contact/

[@kuvar-n7l]

Hello, can you add "Use embossed button style" and is perfect please ?

[@amine-ammari]

You can send my code tochatgpt and it will help you

[@chronobeats]

This is an amazing tutorial, one of the best on YT! I have a question, on mobile when on low power mode, the video doesn't auto play but rather shows a play button, this is unclickable. Is there a way to either have a place holder image with no play button (prefered), or have this button be actually clickable?

[@chronobeats]

I forgot to mention that setting the cover image as remarked in the video only has a pixelated background behind the play button

[@amine-ammari]

Yes there must be a way but I don't have the code for it

[@DylanCrozier1]

Funny enough I have the same problem that on battery saver mode the video doesn’t automatically play

[@tarachitra]

Hello ☺ thank you for this video 🙏. Any idea about how to have clickable images on multicolumn in Shopify?

[@amine-ammari]

Glad it was useful, I don't have the code for the multicolumn you will have to hire a dev for it

[@tarachitra]

@@amine-ammari Thank again for the video banner code!!! it is amazing ☺🙏

[@evan_moody]

The one helpful video out there

[@stevenswift_]

We need more people like you thank you!!!!👏

[@amine-ammari]

thanks Steven!

[@stevenswift_]

@@amine-ammari just i have issue, the video doesn't open in mobile and takes so much time to load!!! and I compress de video is on mp4?? how I can solve the problem

[@amine-ammari]

@@stevenswift_ It doesn't open on mobile because either it's too large Or the phone is set to battery-saving mode

[@stevenswift_]

@@amine-ammari its was bold, thank you so much!!! I give you like and suscribe!!!

[@daniilzubkov1388]

Some problems appearing, when you upload video and you said that you can edit it if someone using the battery saving mode.. I dont have edit button on the video like you do, why?

[@amine-ammari]

That's strange I don't know why the edit button is not appearing But it's not related to the battery saving mode

[@radimvondrak6067]

very good tutorial

[@anaithalvarezsanchez9704]

This is the best video!!, thank u so much

[@MS-fz7su]

You just earned a subsription, good job mate

[@amine-ammari]

Thanks mate

[@rahulbhowmick1967]

You Saved ME Dude

[@amine-ammari]

I got your back dude

[@Mohamed.Shokkir]

Is it possible to show it on mobile only?

[@Mohamed.Shokkir]

For anybody who has the same question, the solution is pasting this code in the CSS box within the section: @media screen and (max-width: 749px) { { display: none; } } /* Replace "max" with "min" to do the opposite */

[@M.E.O_]

Im facing 3 small problems 1. when i make videos on canva with a Transparent / White frame around it, in the Videobanner it shows a greyish frame around the video. 2. When I scroll on the desktop version the videos seem to flicker slightly and with a slight greyish overlay. you have any suggestions what i can do ? Thanks :)

[@amine-ammari]

You need to hire a dev I can't help you without looking at the code

[@ultrAbdu]

I need a section with multiple videos and slider, for example with swiper js, can you do that?

[@amine-ammari]

Thanks for the suggestion If a lot of people request it I'll make it

[@garen189]

thanks man this is very helpful!

[@xxRooz]

Best video and best code out there, thank you!!!

[@anabellamendoza4868]

how to edit the shadow, i dont want it to be darker , plisssssss

[@amine-ammari]

Send my code to chat gpt and tell it to delete the shadow

[@MrAlwaysKarmaYT]

Hey, Amine. The video banner works amazing, however, for whatever reason, when a new page of the website is clicked (such as the shopping cart) the video banner remains on the top of the screen rather than remaining on just the homepage of the website. Any solutions?

[@amine-ammari]

Make sure you added the video section on page section and NOT on the header sections

[@eliabe.s.r]

irmão, te amo, me salvou

[@Mercedesartistry]

Ahhh Finally!! Thank you!!

[@yashdhoka7793]

what if i want to place video on mobile view will it work same

[@amine-ammari]

You can choose a video for mobile in the settings

[@prinznorbert4553]

This is not working with mp4 files. Tested it on firefox and brave. How do I get this to work?

[@amine-ammari]

the file a probably not compressed properly Try to compress the files again It should work with mp4 files

[@yuravanessa8155]

Very good, thanks🎉🎉

[@elmusicgenius]

thanks you for this video it was really rich in informations

[@silverk4643]

if the text were even wider on mobile, then everything would be perfect. but that's fine too =)

[@amine-ammari]

Thanks for the feedback

[@Imperiallife-d3s]

Amazing 😍😍😍

[@selfactualizationnow]

Ahh the video has free space on the sides and the text does not align in the same way as heading. How to fix that?

[@amine-ammari]

Your theme probably adds some code to the section you will need to write more code to fix it

[@selfactualizationnow]

@@amine-ammari howwww do I fix it?

[@amine-ammari]

@@selfactualizationnow You will need to hire a dev unless you know how to code

[@AaronRiveraOfficial]

It does not autoplay on mobile :/

[@AaronRiveraOfficial]

Oh wait it doesn't play when in low power mode, when i take it off, it plays fine. That's weird. I wish there was a workaround

[@amine-ammari]

@@AaronRiveraOfficial I don't know any workaround unfortunately

[@Cuisinechic.]

Where is link?

[@amine-ammari]

You get it when you join the email list

[@erickflores6240]

Can I get the code?

[@amine-ammari]

You get it when you join my email list

[@JapanFoodGrocer]

Perfect video, the video works perfect for my site, I just wanted to ask if you can make a video for a video slideshow? Right now I have a slideshow but it only allows me to show pictures. Do you think you can create a code for a slideshow that can use videos for desktop and mobile. Thank you, you are awesome sauce. You definitely get a like, subscribe and a comment and I will also save it on my playlist.

[@amine-ammari]

Thank you for the feedback, I really appreciate it. If a lot of people request a slideshow with videos I will create it the section, but it will probably be a paid section.

[@JapanFoodGrocer]

@@amine-ammari thanks for replying and having a video slider would be awesome, we just have the picture slider for now but it would be nice to have the video

[@JapanFoodGrocer]

@@amine-ammari you ever make that video slider, just checking

[@amine-ammari]

@@JapanFoodGrocer Not yet :-)

[@JapanFoodGrocer]

@@amine-ammari ok let me know when you do that would be really nice to have the video slider

[@roshnijeswani7317]

where is the video banner code

[@amine-ammari]

You get it when you join my email list

[@Hddy-k7x]

mine didn't autoplay

[@amine-ammari]

Maybe the video is in the wrong format make sure it's mp4 format

[@TTClipzzz]

HEY youtube doesnt work;(

[@amine-ammari]

You need to save the editor

[@TTClipzzz]

I have it doesn’t work,

[@angelafernanda6239]

Gênio

[@amine-ammari]

Obrigado

[@angelafernanda6239]

@ bom dia, você saberia me dizer como faço pra ocultar o vídeo da aba de produtos? Quando oculto da aba de produto acaba ocultando da página inicial também

[@amine-ammari]

@@angelafernanda6239 You have 3 places where you can create a new section Header, Template and Footer When you create a new section in the editor and add it in the Header or Footer it will show up in all pages Please create the section as a template section and not as a header section (second add section)

[@Maestro170]

Let me Follow

[@Horizonfinds.stores]

great job!