Skip to content

Instantly share code, notes, and snippets.

@nealrs

nealrs/page.html

Created October 28, 2016 18:23
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nealrs/14db0c56a10dc7ebbb8558324bb0c8da to your computer and use it in GitHub Desktop.
Save nealrs/14db0c56a10dc7ebbb8558324bb0c8da to your computer and use it in GitHub Desktop.
Download ZIP
twitter player card sample
Raw
page.html
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@wakeyio" />
<meta name="twitter:title" content="Hemopure ~ Wakey Wakey #26" />
<meta name="twitter:description" content="Hemopure is an artificial blood (HBOC) that’s saving lives in South Africa. It’s shelf stable and 100% compatible with all blood types." />
<meta name="twitter:image" content="https://wakey.io/public/img/thumbs/26.png" />
<meta name="twitter:player" content="https://wakey.io/embed/26" />
<meta name="twitter:player:width" content="720" />
<meta name="twitter:player:height" content="720" />
<meta name="twitter:player:stream" content="https://wakey.io/public/vid/26.mp4" />
<meta name="twitter:player:stream:content_type" content="video/mp4" />
</head>
<body>
This page has meta tags showcasing the Twitter Player Card with a static MP4 file. The video is courtesy of @TwitterDev via Vine.
<br><br>
When implemented on your own site, please ensure that all links to video are secure (use https).
<br><br>
Lastly, the behavior of video playback is according to the following rules: https://dev.twitter.com/cards/types/player
</body>
</html>
Raw
player.html
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
video {
width:100%;
max-width:600px;
height:auto;
}
</style>
<video width="100%" controls>
<source src="https://wakey.io/public/vid/26.mp4" type="video/mp4">
Your browser does not support video
</video>
</body>
</html>
@michaeljiz
Copy link

Do you host your player.html at https://wakey.io/embed/26 ? How can you dynamically read 26 and move that to the twitter:player:stream ?

@nealrs
Copy link
Author

nealrs commented Jul 27, 2020

Do you host your player.html at https://wakey.io/embed/26 ? How can you dynamically read 26 and move that to the twitter:player:stream ?

Hey @michaeljiz, oof - it's been ages since I worked on this :)

  • I'm not actively maintaining the wakey.io site (and haven't for a couple years). So things are likely out of date / have stopped working properly
  • I don't recall exactly why, but I stopped using these players cards on site at some point and replaced them with summary cards. i think something about the native apps not supporting them??
  • you need to verify your domain for twitter cards, and this one in particular is more difficult or something like that. Twitter APIs be nuts, you know?

To answer your questions though, yes, I hosted player.html at some subroot URL like /embed/ep# and I compiled all the HTML / whole site using jekyll, so it was all templated out, and i had unique URLs for each video.

Frankly, I think you're better off hosting video on YouTube then trying to do a self hosted static hosting approach like I did.

Good luck!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment