Media and embeds
A post on a personal site is rarely just text. It quotes a post on X, shows a photo, links a song that was playing while it was written. This page collects those pieces, as they come out of Notion and onto the page.
Posts on X
Posts on X render with react-tweet, on the server, as ordinary HTML. There is no embed script from X, so the post shows up with the rest of the page instead of popping in a second later.
just setting up my twttr
Images
Images uploaded to Notion get signed URLs that expire after an hour, which is shorter than most pages stay cached. Here they go through a small route that redirects to a fresh URL, so a page cached for a week still shows its images. Captions become a figcaption.
Players
Players show a preview from oEmbed and load only when clicked, so they set no third-party cookies until then.
YouTube
Spotify
SoundCloud
Why click to load
An embedded player is a small website inside your page. A YouTube iframe alone downloads hundreds of kilobytes of JavaScript and sets cookies for its own domain, before the reader has decided to watch anything. Multiply that by a few videos and playlists, and a post that is mostly text becomes slow, and starts tracking people who only came to read.
So each player starts as a card built from the service's oEmbed data: the title, the artist or channel, and the artwork. The card is plain HTML and an image. Only when the reader clicks play does the real player load, and it starts right away, since the click already said what they wanted.
The cards are made to look like the players they stand for. Spotify's takes its colors from the artwork, SoundCloud's has the orange play button, and videos keep the 16:9 frame of the player, so nothing jumps when it loads.