How to Make your Embedded Facebook Live Videos Mobile-friendly-ish

Mobile Responsive Embedded Facebook Videos in Squarespace

The other day a fellow entrepreneur who uses Squarespace popped in on my Facebook Page to ask about how to make embedded Facebook Videos on Squarespace mobile-friendly.

It dawned on me, dang, I never actually checked mobile to see how the videos looked. I assumed, wrongly, they were mobile responsive.

They were not.

See - the video width is cropped. Had no idea!

See - the video width is cropped. Had no idea!



First, before you continue reading this post, if you don't know how to embed a Facebook Live and regular FB video in a Squarespace page, read this post first

Then come back!

I didn't (and still don't) have a whole ton of time to find the solution but as a determined-to-figure-stuff-out elementary HTMLer & CSSer, I went in search of an answer anyway.

Let me admit right here that I'm more of a copy and paste coder. I know that there's got to be some code out there that will work and if I pinpoint it just right, I'll find the answer.

I did. 

Sort of.

The trick, apparently, is to set the width view in the code at 100% rather than pixels. (Mine was at 560).  Here's a picture of the embed code where I change it from 560 to 100%.

Make Embedded Facebook Video in Squarespace Mobile Responsive

Here's where the 'sort of' solved it comes in. The width now looks good in mobile, but the height doesn't work. I tried height at 100% and Auto, but the video ended up cropped midway. I've kept height at 400 so there's a padding issue. (I think it's a padding issue).

Embed Facebook Video in Squarespace Height Issue

But you know what, I'm ok with that for now. Having said that, if anyone has the answer PLEASE PLEASE share it with us over on Facebook in the post where the discussion is already taking place.

We will forever be in your debt. Or at least very very grateful.