How to Make your Embedded Facebook Live Videos Mobile-friendly-ish
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.
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.
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%.
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).
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.