Twitter Player
<head>
<meta charset="utf-8" />
<title>Twitter Player</title>
<meta
name="description"
content="Dual timelapses of the Seattle Waterfront before and after the viaduct removal"
/>
<meta property="og:title" content="Seattle Waterfront Before & After" />
<meta
property="og:description"
content="Dual timelapses of the Seattle Waterfront before and after the viaduct removal. And demonstrating how more complex media types are handled by OG preview links."
/>
<meta property="og:type" content="video.other" />
<meta property="og:image" content="https://assets.gregle.dev/timelapses/viaduct/preview.jpg" />
<meta property="og:video" content="https://assets.gregle.dev/timelapses/viaduct/Viaduct-embed.mp4" />
<meta property="og:url" content="https://seattle-viaduct.gregle.dev/" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1920" />
<meta property="og:video:height" content="1080" />
<!-- ... -->
<meta name="twitter:card" content="player" />
<meta name="twitter:title" content="Nazi Punks Fuck Off" />
<meta name="twitter:site" content="@elonmusk" />
<meta name="twitter:player" content="https://meta-tester.pages.dev/punks-fo" />
<meta name="twitter:player:width" content="420" />
<meta name="twitter:player:height" content="360" />
<meta
name="twitter:description"
content="My Content is not for you. NAZI PUNKS FUCK OFF!"
/>
<meta name="twitter:image" content="https://i.ytimg.com/vi/PzHLPnGuVSQ/maxresdefault.jpg" />
<!-- ... -->
<meta property="og:image" content="https://assets.gregle.dev/timelapses/viaduct/preview.jpg" />
<meta property="og:video:width" content="1920" />
<meta property="og:video:height" content="1080" />
<meta
property="og:description"
content="Dual timelapses of the Seattle Waterfront before and after the viaduct removal. And demonstrating how more complex media types are handled by OG preview links"
/>
<meta property="og:title" content="Seattle Waterfront Before & After" />
</head>Twitter also supports a player card. The Player card is basically an embedded non-scrolling iframe put directly inside the tweet. This is an incredibly flexible thing for us to play with. In this case I've set up a full-screen video player that I've paired with my own video content so that Twitter users see something entirely different and unrelated to the thing I've spent time creating for the world.