Last active
October 24, 2019 01:10
-
-
Save luxigo/19e82e0cd2c6de91b8184dc2ec0541d3 to your computer and use it in GitHub Desktop.
Publish your mp4 video in full-res via your own website and post them on social networks with a preview
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> | |
| <!-- | |
| To publish your mp4 video in full-res via your own website and to post them on social networks with a preview: | |
| 1. Create a folder on your website with the name of your video, using hyphens or underscore as word separator. | |
| 2. Upload an image named "preview.jpg" in the folder created at step 1, recommended width: 1200 pixels. | |
| 3. Upload a video named "video.mp4" in the folder created at step 1 | |
| 4. If you named the files somehow else, replace occurences of "preview.jpg" and "video.mp4" below | |
| 5. In the "meta" tags below, replace <VIDEO_TITLE>, <VIDEO_DESCRIPTION>, <.... | |
| 6. Upload the resulting file as "index.html" in the folder created at step 1 | |
| 7. Check that your video is playing by opening your url (https://<WEBSITE_NAME>/<VIDEO_FOLDER_NAME>) | |
| 8. Optional: go to "https://developers.facebook.com/tools/debug/og/object/" and enter your url to check that the preview works. | |
| 9. Share your url | |
| --> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta property="og:title" content="<VIDEO_TITLE>" /> | |
| <meta property="og:description" content="<VIDEO_DESCRIPTION>" /> | |
| <meta property="og:type" content="video.movie" /> | |
| <meta property="og:image" content="http://<WEBSITE_NAME>/<VIDEO_FOLDER_NAME>/preview.jpg" /> | |
| <meta property="og:image:type" content="image/jpeg" /> | |
| <meta property="og:image:secure_url" content="https://<WEBSITE_NAME>/<VIDEO_FOLDER_NAME>/preview.jpg" /> | |
| <style> | |
| html,body { | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| margin: 0; | |
| padding: 0; | |
| background-color: black; | |
| } | |
| video { | |
| margin: 0; | |
| position: absolute; | |
| top: 50%; | |
| -ms-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <video width="100%" loop controls poster="preview.jpg"> | |
| <source src="video.mp4" type="video/mp4"> | |
| Your browser does not support the video tag.<br /> | |
| <a href="video.mp4">Click here to download the video</a> | |
| </video> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment