How to embed a video into GitHub README md

Question

Is it possible to embed a flash video  into README md on GitHub  It isn t showing up  https   github com mattdipasquale PicSciP

User · Answer

just to extend  GabLeRoux s answer     lt img src  https   img youtube com vi  lt VIDEO ID gt  maxresdefault jpg  width  50   gt   https   youtu be  lt VIDEO ID gt     this way you will be able to adjust the size of the thumbnail image in the README md file on you Github repo

User · Answer

For simple animations you can use an animated gif  I m using one in this README file for instance

User · Answer

This is an old post but I was looking for an answer and I found this  https   gifs com  Just upload the video  then it creates a gif we can add easily in a github markdown   I tried it  the quality of the gif is a good one

User · Answer

Update Feb  2021  as noted by Abhishek Singh in the comments  and Nat Friedman on Twitter   You can now     finally      drop images and videos  mp4  gif  onto the Markdown file editor on GitHub   Paste works too  if you re into that kind of thing  It s worked in issues and PRs for a while  what s new here is support in markdown files  GitHub Enterprise Server tends to lag http   github com by a couple of months  but it will get there in a future release   Kyle Daigle  Senior Director of Special Projects at GitHub  adds   Currently  the file is stored as an asset outside the repository  sort of like an image uploaded to an image    Uploads to githubusercontent and stores it there  Then makes a link in the markdown to that uploaded image   The team is interested in exploring adding the image to the repo too    would you want something like that   Sven-Michael St  be comments   I usually add the images to my repo  Especially if you host your blog as github page w  a custom domain  But I think this feature would also add a lot of complexity  It s not a big pain to add the image manually  For PRs Comments the drag amp drop is more essential  Kyle answers   For the blog case  which is what made us think about image upload to the repo  you re totally right  This type of drag and drop is helpful when adding an image to a README or other in-repo documentation though  when you don t want to upload to the repo    That feature has come a long way since its initial proposal    back in 2012     Update Dec  2020  see  quot Video upload public beta  quot   which embeds video  embedding only  not link reference    2010  The  quot Github Flavored Markdown quot  doesn t support this kind of feature for any page  An old support thread  quot Embed YouTube videos in markdown files quot  stated   With pages github io  yes  everywhere else  no    Note  as detailed in  quot Github Top-Level Project Page quot   github io is the new domain for user and organization pages since April 2013  The page GitHub publication is presented here  This could be a feature request like the syntax highlighting was  For instance   quot HTML5 video in markdown quot   August 2010     Is there any way to implement a HTML5 video into the README markdown file   Not currently but we might be expanding what you can do with the READMEs in the future  In the meantime  you can do this with GitHub Pages and our Wikis    Benjamin Oakes confirms in the comments  May 2012    I sent in a support request  The response was that embedding videos is not supported

User · Answer

Even though this is an old post  I thought it would be helpful to mention an additional  partial and tangential  solution to this question on top of the very helpful workarounds that are already present in this thread  At the time of writing  6 January 2021   GitHub has released a feature to upload  mp4 and  mov files up to 10 MB in size to issues  pull requests and discussion comments  as shared here   This is a direct embed  instead of  quot linking quot  it to external URLs as what we usually do  It is already out of public beta  You can attach files by dragging and dropping  selecting or pasting them  A preview of GitHub s new notice can be seen here   Perhaps  in the future  we can slowly nudge GitHub to eventually extend this native feature to READMEs as well

User · Answer

A good way to do so is to convert the video into a gif using any online mp4 to gif converter  Then  Step 1 Create a folder in the repository where you can store all the images and videos you want to show  Step 2 Then copy the link of the video or image in the repository you are trying to show  For example  you want to show the video of the GAME PROCESS from the link   https   github com Faizun-Faria Thief Police Game blob main Preview GameVideo gif   You can simply write the following code in your README md file to show the gif    Game Process  https   github com Faizun-Faria Thief Police Game blob main Preview GameVideo gif

User · Answer

I strongly recommend placing the video in a project website created with GitHub Pages instead of the readme  like described in VonC s answer  it will be a lot better than any of these ideas  But if you need a quick fix just like I needed  here are some suggestions   Use a gif  See aloisdg s answer  result is awesome  gifs are rendered on github s readme     Use a video player picture  You could trick the user into thinking the video is on the readme page with a picture  It sounds like an ad trick  it s not perfect  but it works and it s funny      Example      Watch the video  https   i imgur com vKb2F1B png   https   youtu be vt5fpE0bzSY    Result     Use youtube s preview picture  You can also use the picture generated by youtube for your video   For youtube urls in the form of   https   www youtube com watch v  lt VIDEO ID gt  https   youtu be  lt VIDEO URL gt    The preview urls are in the form of   https   img youtube com vi  lt VIDEO ID gt  maxresdefault jpg https   img youtube com vi  lt VIDEO ID gt  hqdefault jpg   Example      Watch the video  https   img youtube com vi T-D1KVIuvjA maxresdefault jpg   https   youtu be T-D1KVIuvjA    Result     Use asciinema  If your use case is something that runs in a terminal  asciinema lets you record a terminal session and has nice markdown embedding   Hit share button and copy the markdown snippet   Example      asciicast  https   asciinema org a 113463 png   https   asciinema org a 113463    Result

User · Answer

I combine Alexandre Jasmin and Gab Le Roux answers like this      Demo CountPages alpha  https   share gifyoutube com KzB6Gb gif   https   www youtube com watch v ek1j272iAmc    Demo     You can see this demo on github   I used gifyoutube here  but I recommend using a local gif converter  like ffmpeg  see how  instead of an online one   To record your screen to gif directly  you may want to check ScreenToGif

[flash] How to embed a video into GitHub README.md?

Examples related to flash

Examples related to github

Examples related to embed

Examples related to markdown