Embeds templates
Maps, video, audio and share buttons that stay responsive.
4 templates
Third-party embeds are the heaviest thing on most pages and the easiest to get wrong — a map with no title, a video that pulls a megabyte before anyone presses play, an iframe that breaks the layout on a phone. These fix all three.
Google Maps embed
A responsive map with a title, lazy loading and an optional click-to-load consent gate.
HTMLCSSJavaScriptResponsive video embed
YouTube and Vimeo that stay 16:9, with a facade that saves about a megabyte per page.
HTMLCSSJavaScriptStyled audio player
A custom player over the native audio element — keyboard accessible, no library.
HTMLCSSJavaScriptSocial share buttons
Plain links to each network's share URL, plus the native share sheet where it exists.
HTMLCSSJavaScriptThe heaviest thing on most pages
A standard YouTube embed pulls roughly a megabyte of script and makes a dozen requests before anyone has decided to watch anything. A Google Map is several hundred kilobytes. On a page with three videos, that is most of your performance budget spent on content the visitor may never look at.
The fix is a facade: load a thumbnail and a play button — one image, about 15 KB — and swap in the real
iframe on click, with autoplay=1 so the press feels like it started the video. It is the
single biggest performance win available on any page with an embed, and it takes about fifteen lines.
The title attribute is not optional
An <iframe> without a title is announced by a screen reader as just
"frame", with no indication of what is inside it. This is one of the most common accessibility failures on
the web and it is a single attribute. Describe what the map shows or what the video is — not that it is a
map or a video.
Maps are also a keyboard trap for some users: tabbing in hands focus to the provider's controls and getting back out is not always obvious. Always put the address in real text next to the map. Search engines cannot read an iframe, nobody should have to interact with a map to get a postcode, and if the embed fails the information is still on the page.
Consent, if you have European visitors
A Google Maps or YouTube embed contacts a third party and sets cookies as soon as the page loads, before any interaction. Under GDPR and the UK equivalent that generally requires consent first.
A click-to-load facade sidesteps the problem entirely: nothing third-party runs until the visitor asks for it, so there is nothing to consent to until they do. It is faster and simpler than wiring an embed into a consent management platform, and it is why both the map and the video templates include one.
The share buttons take the same approach from the other direction — they are plain links to each network's share URL, so there is no third-party script on the page at all.
Other categories
All of them are free
No attribution, no licence to read. Copy what you need.