Auto Playing Videos in Squarespace | Squarespace Tutorial

[@evanhamlyn9148]

Evan Hamlyn 0 seconds ago If you are experiencing problems with mobile optimization there is a simple solution: change width from 'pt' ----> '100%' For example:

[@Carl_Johnson]

Thanks Evan! I kept meaning to point that out. I'll pin your comment.

[@Joey-yk6fz]

@@Carl_Johnson I'm not sure if I follow, what exactly do I need to change on the code? (on mobile, the video doesn't autoplay)

[@nigellawrence2745]

Perfect!! Thanks!

[@leshorts3624]

thank you mate

[@lauramt309]

I was so annoyed with Squarespace’s video feature.. this helped me a ton, thank u !

[@Carl_Johnson]

Glad it helped you, Lauramae!

[@CepheusMaximus]

Wish I could give this 10 thumbs up. Thank you so much. I was tinkering with KZbin and Vimeo just to get a short small video on my squarespace page. This is so much more professional looking, and absolutely ad free! Note to others, it appears that your mp4 video must be less than 20 MB to upload as a "custom file" as demonstrated by Carl here.

[@Carl_Johnson]

Thanks CepheusMaximus 👍 Glad it helped.

[@ffdkoppenhaver]

This was the most helpful video that I found for this problem I have. I will definitely check out the other videos you have.

[@Carl_Johnson]

Glad it helped you out Dan!

[@ryeryeflow]

I just wanted to say, that you make the best Squarespace videos there are on KZbin! Great job! I like your humour as well :P I subbed and am looking forward to your future content.

[@Carl_Johnson]

Thanks!

[@lingyuhu5563]

Thank you Carl, this helped me A LOT!

[@mmazz414]

This is awesome, mate! Question (because I'm not a code person), for the size of the video, what would I input for full bleed? Thanks again!

[@midnightoracleminis3585]

you saved me a TON of time today, thank you!

[@fluximagery6500]

thank you!! haven't tried it yet but I know this will work, positive vibes! :)

[@znavyu6]

Appreciate it Carl! I am having the same problem. The autoplay works great on the website, but it doesn't appear to work on mobile from an iPhone, it's just frozen as a picture. I put in the code for it to be muted as well, so it's not just that. Is there some type of way to fix this?

[@christianklintholm]

Having the same problem here.

[@groundtenpro]

great tips man! thanks!

[@preshhh123]

I so appreciate this, thank you! I'm just having one issue - on mobile the video border has a grey outline or a grey overlay.. any ideas how I could fix this? Thanks!

[@joehoey2525]

These videos always come right on time 👌

[@Carl_Johnson]

Glad to hear that, Joe!

[@ackry1]

Very helpful tutorial! I've been wondering how to do this! Thanks! 👏🏼

[@Carl_Johnson]

Glad it helped 😀

[@mattbee4091]

You the man Carl! Will this autoplay on mobile too?

[@amandamayfilms]

Hi there! Thanks for this. I completed all the steps, and it will correctly autoplay while previewing inside Squarespace, but when I go to check it on a Chrome browser, it doesn't autoplay and only shows a black screen with the player controls. Any suggestions on what to you?

[@yarafarhat7873]

Hello! Works great thank you! Is there a way to automatically pause it when another video starts playing?

[@meganbeck4173]

Hi! I am super grateful for the content you are putting out, the solutions you are sharing. I am wondering if you could help- my code works wonderfully on the computer but the videos are not playing on mobile. Any insight as to why?

[@XfarglesX]

These have been so awesome. Is there any way to use this and make a section background a video?

[@ryanbeale5412]

Also wondering this

[@ryanbeale5412]

Have you been able to find a solution @matthew

[@XfarglesX]

@@ryanbeale5412 I have not yet, but I'm still working on it. I just don't really know what I'm doing lol

[@Carl_Johnson]

Hey Mathew! Yes there is, but it depends what template/version you are using ...plus it would be quite lengthy to explain here. If you shoot me an email, or get in touch through me website I should be able to help.

[@Carl_Johnson]

Having a problem with the video not auto-playing? Check this post out 👉bit.ly/3CjjDMC

[@bjohnsonxar]

Carl, thank you for the upload! I'm having difficulty CENTERING the video. It appears to be right aligned. Any suggestions?

[@bjohnsonxar]

From my point of view, when I included the "" codes it should've centered. However, the one thing I did differently than you was that I added 1250 width instead of your 500. Would that be an issue?

[@themarketgames.]

Any advice/content that explains how to mute a video on Squarespace? I would like videos to be muted by default

[@chukleberryfinn]

Awesome tutorial paired with the scrolling after effects one! I still can't get mine to autoplay on mobile. I've muted but the option to enable / disable paralax loading is not there under site styles on 7.1 brine template. Any ideas? Thanks again!

[@catalinsandu3844]

Thanks for this great tutorial! The videos auto-play great on desktop and android phones but show up as still images on an iPhone (both Safari and Chrome), if anyone has any ides on how to fix this, it will be highly appreciated!

[@xX11env11Xx]

Hey Carl great video thank you for uploading this info! I wanted to know how I can also create a border around the video, with the option to change the thickness, color, and make it rounded edges. Is this possible??

[@Harri4dl]

Hey Carl, great video!! I was wondering if there's a way to apply this effect to an image:hover state? I should be able to do it inline html but having trouble putting it all together. Any ideas? Thanks!!

[@faisalalmutairii]

Everything worked perfectly except for the video width on mobile. Is there a way to adjust it to fit the screen perfectly? Thanks

[@alexgill6752]

Thanks for this, Carl (and the rest of your videos too). I'm desperate to find a way to have something like this, but as a project thumbnail (Main nav > Collections > Portfolio) - i.e. a 4 second looped video animation. Any idea if that's possible on 7.1? They used to let you embed a video url on the old one, but got rid on 7.1 for some reason. Any help/tips/insight would be very much appreciated. Cheers!

[@josieb68]

You are amazing. Thanks for the humor and SUPER helpful Squarespace content. Question: How would I make this responsive with media query? Thanks in advance!

[@Carl_Johnson]

Thanks! You can set the width to a percentage e.g width="50%" and it will resize responsively. You would need to put a media query for mobile and tablet with a higher percentage though.

[@josieb68]

@@Carl_Johnson AND you reply! 🙏 Thanks a bunch for your response. I replaced it as percentage like you said and it works perfect. 👍👍👍

[@byjamesrobinson]

you're the man, carl!!

[@Carl_Johnson]

Haha! Thanks James.

[@annka506]

Hey! Thank you very much for the video! I have issues with mobile version. How can I make auto play for mobile? Thank you!

[@designjewelrylab5177]

Had it worked perfectly but when switching to mobile, Im assuming it keeps the size and distorts the block.

[@Carlocabreera]

THE GOAT

[@Carlocabreera]

CARL! I NEED U. bro Ive been trying to put this design in my homepage for a while. Your code worked but unfortunately on ios it adds forcibly the controls and I cant remove them for some reason. Do you have any solution to this?

[@jurgendevries1036]

Thank! But one thing... I get this thin black line next to my video. How to fix?

[@daysarelimited]

Hi i ahve tried changing width="100%". However I also want to set the max-width to 500px so that during desktop mode, the video wont be "100%". I added max-width="500" after width="100%" but that did not work. Any idea why?

[@Carl_Johnson]

Hi! I would probably set the max width of the code block that the video player is in to 500px

[@dontobey879]

Which editor do you prefer? Cool vid! Thanks

[@Carl_Johnson]

Thanks Don! Favourite editors: Video - Final Cut Pro Animation - After Effects Photo & Graphics - Photoshop & Affinity Photo Web - **ahem** Webflow

[@sarahmonte-colombo1982]

Thanks so much! I love your videos, always so simple. On this though, for some reason my logo is now left aligned and i can't work out the code to centre. Are you able to help on this pretty please?

[@glynjenkins9508]

Thanks Carl great site !!!! I added a couple of videos to my site and they play brilliant !! Could you give me some advise on resizing them on my mobile, as when I scroll through the site on my mobile it is only showing around two thirds of the video player, it is probably a dumb question, but any help would be great !!

[@Carl_Johnson]

Thanks Glyn! No problem, and not a dumb question at all. You can replace the width number with a percentage instead (e.g width="100%"). This will allow the video to rescale responsively.

[@glynjenkins9508]

@@Carl_Johnson Thanks mate, just updated now.... Awesome !!!!

[@wheelgordes8253]

For some reason there is no video, the section is created, the controls (and even the sound) are their, but it is blank.

[@kingsaf90]

Hey can you please do a tutorial on how to change the size of the file so it looks good on desktop and mobile please , many thanks

[@Carl_Johnson]

Try this Safsum

[@ramishaziz7971]

Hi Carl, on desktop video uploads great but it is not scaling down on mobile. Could you please help out

[@renfuller6990]

Does anyone know how to add text hover over this code block to show over the video?

[@viviannwigwe3946]

having a problem with the first step. after optimizing my video in handbrake when I go to upload it into custom CSS nothing happens, nothing uploads. SOS!

[@bobh.7781]

some issue here. stopped at very first step because video - which is mpeg-4 and around 75mb - just doesn't upload.

[@katecantankerous1660]

This worked for me, however, it doesn't seem to fully load on Chrome. No issues with other browsers like Safari or Firefox. I don't have the Ajax Loading option to disable. My site is version 7.0 Montauk family. Any suggestions on how to make this work properly on Chrome?

[@bibavonspeyr8983]

Is there a way to have a play button instead of autoplay?

[@mikedftv]

Can you set this up, so its a gallery on static images, and on a hover it autoplays a video? Hope someone can help

[@niekaalbers3192]

It won't let me uplaod a video in custom files, any idea why?

[@JasonnnnP]

Hey, thanks! Super helpful. Do you have to add certain code to make the code block adjust to the size of the browser. Eg viewing it on a phone the video is too large for the screen and overflows on the side of the page. Cheers!

[@thebeamlightproject]

change the width from 500 to 300 to be a good size for a phone.

[@samuelwells7035]

Hi Carl - I am still having trouble getting the video to autoplay on mobile - it just has the first frame of the video loaded to press play instead of autoplaying - do you know if there is a solve? Works great on desktop!

[@samuelwells7035]

Also if a thumbnail could be added for the mobile site that could work as well - let me know your thoughts!

[@KC-cr8np]

I have the same issue. The only way I have been able to play the video on mobile is by adding controls and clicking play which is annoying as it obviously adds this to the video on desktop too which wasn't necessary

[@sabinemescher]

love your videos! thanks a lot for them. This one came exactly at the right time as I am working on a clients site right now. Unfortunately when I switch to incognito browser it's not running... the code is correct - do you have any idea? (Brine template)

[@Carl_Johnson]

Hi! I've just published an update about problems with the video not auto-playing. Hopefully, it'll help you out bit.ly/3fnhapE

[@sabinemescher]

@@Carl_Johnson perfect! thank you!😄♥️ it works!

[@harrietdavie218]

Hey Carl, I'm having an issue with the video not showing at all on mobile? Any tips?

[@elsaamb9727]

Hi, I have a problem with autoplay. My video does not start playing unless I click somewhere, the home page, for example. I use it for the landing page. In the editing mode, everything works. What do you think could be the problem? The video is 1,4 MB

[@Carl_Johnson]

Hi Elizaveta! I've just published an update about problems with the video not auto-playing. You can see it here bit.ly/3fnhapE

[@bjohnsonxar]

Has anyone experienced a mobile viewing issue when completing this? On my iPhone, it seems to be enlarged and not fitting the screen. It fits the screen perfectly when I simply copy+paste the youtube link onto the page instead of this process.

[@laceyhanchak37]

Try this instead of sizing the video with a number. This worked for me and my video is responsive for mobile now. width="100%" height="100%"

[@faisalalmutairii]

@@laceyhanchak37 i was searching the comments section for this. thanks a lot worked perfectly 👍🏻

[@kevinfitzgerald5771]

thank you.

[@anaseljamal7105]

can u please give us the code to copy it

[@rolandvandenhout]

Domo Arigato Carl....

[@lomps]

Absurdly over complicated