It's my first time deploying a website via github pages and I've noticed a problem with embedding videos (mp4 in my case). Everything else is working and loading fine (including images) however whenever I try to view any of the embedded videos on my website, I get the following black screen with the controls greyed out:
(for reference the video in this screen shot is only 2.89 MB)
I found this weird, because while building the website and testing things on local host, everything was working fine and all embedded videos were working perfectly with full audio and video. I've researched a bit on what the issue is but can't seem to get a clear solution as some people recommend hosting the videos externally like on youtube and then embedding that link but I really want the videos to work embedded within the website without having to host the videos anywhere else which is a last resort.
For reference, following are the snippets of my code relating to how I'm displaying these videos and cannot seem to find any errors so far:
index.html:
<video class="responsive-video" id="knowPros_vid" controls>
<source src="./assets/knowPros_Demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
style.css:
/* Applying CSS limits for videos used in the carousel to avoid distortion */
.responsive-video {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
Out of the 3 videos I have on this webpage, only one is a large video file (143 MB) but the other two are both small video files (2.89 MB & 4.39 MB), however this issue is being had with all of them which is why I think it's safe to rule out a git-lfs problem since that's only used for the largest video file.
I also don't have a gitattributes file for this repository, idk if I should cause everything has been working fine without one. (don't know if it's important but just thought I should mention it just incase)
Getting no console errors and the page is still loading up just fine. No 404 errors or network issues.
Please let me know if anyone has faced a similar issue and if so how it can be tackled. Also if any methodologies have expired as of currently, plese let me know. Thanks :)