Just a couple months ago GitHub announced video uploads
support, which allows you to just drag&drop an
.mov onto an issue,
pull request or discussion and have it uploaded and hosted by GitHub for free 😍.
If you are hosting a blog or website with GitHub pages, this also makes them a good choice for embedding some nice videos there too!
So the first step is to create an issue and drop the video in there, like I did here. If you edit the issue, you can see the final URL for the uploaded video, something like https://user-images.githubusercontent.com/NUMBER/NUMBER+GUID.mp4 and looks like the following once saved:
You can use the browner’s devtools to inspect the HTML used to display it, which for this issue looks like:
<details open="" class="details-reset border rounded-2"> <summary class="px-3 py-2 border-bottom"> <svg aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" height="16" width="16" class="octicon octicon-device-camera-video"> <path fill-rule="evenodd" d="..."></path> </svg> <span aria-label="Video description dotnet-evergreen.mp4" class="m-1">dotnet-evergreen.mp4</span> <span class="dropdown-caret"></span> </summary> <video src="https://user-images.githubusercontent.com/169707/126715420-991ad821-9ac8-4b66-b79e-e0966e0f3a89.mp4" data-canonical-src="https://user-images.githubusercontent.com/169707/126715420-991ad821-9ac8-4b66-b79e-e0966e0f3a89.mp4" controls="controls" muted="muted" class="d-block rounded-bottom-2 width-fit" style="max-height:640px;"> </video> </details>
Which you can embed directly in your GitHub pages-powered site like I did in my recent blog post on dotnet-evergreen:
<video src="https://user-images.githubusercontent.com/169707/126715420-991ad821-9ac8-4b66-b79e-e0966e0f3a89.mp4" controls="controls" style="max-width: 730px;"> </video>
Which looks great on the published post and doesn’t take any space in the actual git repository when cloning on a fresh machine 😍.