make your embedded youtube video responsive

I wanted to embed some of my art tutorial videos from YouTube here, but kept running into the dreaded lack of mobile responsiveness. I just couldn’t ignore how the standard YouTube embed code wouldn’t resize. Annoyed that they hadn’t built that basic functionality into their code, I dropped the idea for a bit. Fast-forward, and I want to create more YouTube content, so ye olde “video looks like shite on mobile” issue reared its ugly head again.

But, today I found a bit of code that works. It’s short and elegant. Now, both desktop and mobile resize responsively for embedded YouTube videos.

Wanna try it? It’s genuinely easy, as long as you know how to add the correct content block in your Squarespace site.

Get the video embed code:

• Go get your YouTube video embed code from your video sharing option. Make sure you copy the Embed code to get that SRC URL because it is different to the Share URL.

• Paste it into a Notes file or text document of some sort. (not shown)

Create responsive, mobile-friendly YouTube embeds starting with these steps to get your video embed code.

Next- copy this code too:

• Copy-Paste this bit of code into a new paragraph in the text document.

Note/Disclaimer: I did not write this code (I stopped doing most of my own web dev stuff years ago); the author is unknown to me. I found it after searching and trying a few different potential solutions, and the source wasn’t the author either. Is it yours? Let me know. Also: If YouTube decide to change their embed code, this might not work, but it does today.

<div style="display: flex; justify-content: center;">
<iframe style="aspect-ratio: 16 / 9; width: 100% !important;" src=...></iframe>
</div>

• See the … after the src= in it? Paste your YouTube embed code from that point (right over the dots in the responsive code) all the way to the > right after the word allowfullscreen in your YouTube code. Congratulations. The important stuff from YouTube’s code is slotted into a div that makes the responsive magic happen. See the photo for exactly what I am explaining.

Combine the responsive code snippet with part of your YouTube video embed code to create the mobile-ready video for your Squarespace website. The highlighted area above shows what I copied from my YouTube code, and where is was pasted into the responsive code snippet that creates the resize behaviour for mobile devices and desktop windows.

Stick it in the content block on your site:

If you don’t know how to do this part, ask one of your geeky friends, do a Google, or consult the help docs on Squarespace.

• Now, copy that combined code into an Embed block on the Squarespace page of your choice. Save and Exit.

• Marvel at the responsiveness, while you sip a tasty beverage.