Search code examples
htmlgithubgithub-pages

How to Get Videos to Load on Github Pages html?


I'm trying to get a few videos to play on a webpage using Github pages, I've uploaded my video files to my repo but the videos aren't loading when I open the webpage, but they work when I run my .html files locally. Here's a code snippet of what I have:

<video width="1280" height="720" controls autoplay muted loop>
<source src="videos/WebIntroG.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

I've also tried this:

<video width="1280" height="720" controls autoplay muted loop>
<source src="https://michael1410.github.io/RobotGoon/videos/WebIntroG.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

Not sure if this matters but my video files are stored with git-lfs, they were over 50MB. Thanks.

Edit: So I've uploaded a smaller video file, under 25 MB, and it worked. So I'm not sure gitpages will load .mp4 files larger than 50MB stored using git-lfs.


Solution

  • Okay so the solution was posted at MP4 file stored with git lfs not playing in Github Pages by VonC. For .mp4 files stored with git-lfs use this:

    https://media.githubusercontent.com/media/_Username_/_Project_/_Branch_/_Path_to_file_
    

    Edit: Just a heads up, there's a storage and bandwidth limit for git-lfs of 1GB a month and it cost 5$ to buy more (you get 50 GB for 5$).