posts/embed-borderless-videos

[utterances-bot]

How to embed borderless, autoplaying, looping videos on Squarespace | Justin Wyne

Personal blog about software, travel, photography, and rock climbing.

https://r2.justinwyne.com/posts/embed-borderless-videos

[wyne]

Migrated comment thread from SquareSpace:

Taylor

Hey Justin this has been immensely helpful, thank you for posting. The embedded video doesn't seem to play on iOS, do you know if there is a way to set a "fallback" gif for mobile -- like Squarespace supports for their background videos? Thank you again.

Justin Wyne

Some of the recent additions may address this for you.

Justin Wyne

I'm glad you found it useful! That's a good question, I haven't really focused on solving that problem, but I suspect it's doable. Let me know if you come up with a solution and I'll post here if I come up with anything.

[wyne]

Migrated comment thread from SquareSpace:

Stephen Lopez

Stumbled on this post and THANK YOU for breaking this down. One note for anyone else who happens to find this...new browser updates only allow autoplay to work if it's set to "autoplay muted"

Justin Wyne

Oh, so you're saying to do this, right? <video autoplay muted loop> Thanks for the feedback!

[wyne]

Migrated comment thread from SquareSpace:

Wolfe Erikson

Thanks so much for this information!! Discovered a workaround to get videos to autoplay on mobile as well. It needs a playsinline atribute <video playsinline autoplay loop muted style=

Justin Wyne

Thanks for the tip! I've added it to the post.

[wyne]

Migrated comment thread from SquareSpace:

Nondys

This seems super helpful! But I don't think there is enough visual step by steps. I have no idea how to export a video on HandBrake. I'm surprised I was even able to import your preset lol. And I have no idea how to create a public URL for my video.... Could you possibly make this post more for dummies like me? haha I would super appreciate that.

Nondys

And by "I'm surprised I was even able to import your preset" I just mean that I'm surprised I figured it out without any help on how to do it lol.

Justin Wyne

Yea, I know this page is lacking a lot of details. I’m surprised myself how many people actually get some benefit from it. If I have some time this weekend, I’ll try and fill in more details around the Handbrake/S3 part.

Justin Wyne

Nevermind, I went ahead and added all the detail you should need. LMK if that helps.

[wyne]

Migrated comment thread from SquareSpace:

theplg

Hey man -- this is awesome. You are awesome. Thanks so much -- got this to work for me within a couple hours. You da 💣

Justin Wyne

I'm glad to hear it helped!

[wyne]

Migrated comment thread from SquareSpace:

desiree

hi justin! I thought I did everything correctly, but whenever I try to upload the video nothing comes up. HandBrake worked well and a small video exported; however once I get to AWS it gets confusing. It looks a bit different than the pictures you have posted. Anyway, when I open the Object URL on AWS it says "This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>AC288C4A424D7D08</RequestId>
<HostId>YBTmVlBPh/ryMBfO6GrCoVIry3huM/RrJMHbevBxsyD30JfAumpU2cIA2zhal5HPS8OicRUp/Xg=</HostId>
</Error>"

No idea what this means, maybe you could help? Thanks much!

Justin Wyne

That means your video isn’t public. Make sure your bucket allows public objects: Navigate to the S3 service and you should see a list of your buckets. Ensure under the > Access column that your bucket says “Public” or “Objects can be public”. Make sure your video is public: Open your bucket and navigate to your video file. You should then see three tabs across the top for your video file, “Properties”, “Permissions”, and “Versions”. Choose “Permissions” and click Edit under Access Control List (ACL). And select “Read” for “Everyone (public access)” and save changes. I hope this helps.

Justin Wyne

And thanks for letting me know the screenshots are outdated. They seem to have updated the UI. I'll update them soon.

---

[wyne]

Migrated comment thread from SquareSpace:

Anna

Thank you so much for posting this! I'm working in 7.1 trying to get a video to autoplay and loop on mobile. Your code works perfectly on desktop, but not on mobile (or, at least on an iPhone). Is this what the code should be when adding Wolf Erikson's addition?

<video style="width: 100%" style="loop autoplay playsinline muted style"
src="https://northlands2.s3-us-west-1.amazonaws.com/Northlands-Live-Concerts-NH-Public-Promo.mp4">
<source type="video/mp4" src="https://northlands2.s3-us-west-1.amazonaws.com/Northlands-Live-Concerts-NH-Public-Promo.mp4">
</video>

Or am I getting this wrong? Many thanks!

[wyne]

Migrated comment thread from SquareSpace:

Adam Bright

hey - is there anyway to make it clickable? Thanks so much.

[wyne]

Migrated comment thread from SquareSpace:

PHB

Hi Justin, thanks so much for this! The issue I'm having is that on mobile I'm getting a grey outline or a grey overlay on iOS / Android respectively.. any ideas? Thanks!

[wyne]

Migrated comment thread from SquareSpace:

PHB

FYI and for anyone with the same issue of grey outline or overlay, this seemed to fix it: https://stackoverflow.com/questions/52508598/html5-video-element-on-iphone-has-border#new-answer

[wyne]

Migrated comment thread from SquareSpace:

Okim Selim

You don't need AWS for this. You can upload your videos to Squarespace through Design > Custom CSS > Manage Custom Files. Then you just click on the file when it appears in the list and the link will get pasted into the CSS code window. Copy it from there to use in your code snippet.

Justin Wyne

Good point, that's much simpler especially if you don't already have AWS. Thanks for the suggestion!

Vince

true, but you only get 30 minutes of video storage before being charged for more.