Created
October 28, 2016 18:23
-
-
Save nealrs/14db0c56a10dc7ebbb8558324bb0c8da to your computer and use it in GitHub Desktop.
twitter player card sample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
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 ?