My website is https://agitated-kalam-038034.netlify.app/
and i have a video background for my hero in homepage. Used this library to set up my video background and installed Git LFS and Netlify LM successfully with Git LFS successfully pointing towards my video but it still won’t load the video. Please help. thank you!
Hi, @javkhlantugs. I don’t see any video files in the list of deployed files for this site. These are the files in the current deploy:
/index.html
/favicon.ico
/js/research.589323ef.js.map
/js/app.ac1dcf09.js.map
/js/treatment.b409ab1b.js
/js/treatment.b409ab1b.js.map
/js/offer.b23662e0.js
/js/innovation.abeb7242.js
/js/media.eb0c1629.js
/js/media.eb0c1629.js.map
/js/research.589323ef.js
/js/medical.8bd690f3.js
/js/contactus.e0056a25.js
/js/chunk-vendors.1cc80ada.js.map
/js/medical.8bd690f3.js.map
/js/innovation.abeb7242.js.map
/js/app.ac1dcf09.js
/js/about.292a434a.js.map
/js/contactus.e0056a25.js.map
/js/chunk-vendors.1cc80ada.js
/js/about.292a434a.js
/js/offer.b23662e0.js.map
/css/app.47476633.css
/img/bttlogo_white.3a7e452f.png
/img/green_hippocampus.0fee298f.png
/img/abstract.3d8f2883.png
/img/bttlogo_text_gradient.b5824567.png
As you can see, there are no videos listed there. Did you copy the file in question to the publish directory (or some subdirectory of the publish directory)?
If not, that is why the file is missing. It could also be that you have not pushed the file to Large Media. If so, that can be corrected with this:
git lfs push --all origin
Please let us know if neither of these solution work or if there are other questions.
I just pushed my files like you said. and it seems like everything is done correctly with the large file in my github page pointing to the pointer and everything. But i do not know what you mean by copying it in the publish directory, i do not have a publish directory but i do have public. Or do you mean the dist directory? which was created when i installed netlify in my app. There was one video in the media file which i was using but then changed it to the current video i am using now which has pretty similar file name, too. I wonder if it indicates anything
Hi, @javkhlantugs. The “publish directory” is a term specific to Netlify, quoting:
- Publish directory : Directory (relative to the root of your repo) that contains the deploy-ready HTML files and assets generated by the build. If a base directory has been specified, it should be included in the publish directory path. For example, if your base directory is set to
site, the publish directory should include thesite/prefix like so:site/public. Visit the common configurations doc to learn about typical settings for popular tools and architectures.
The command for this site’s build process is npm run build and the publish directory is dist.
If you want that file to be available on your site, the build process must put the video file in the somewhere in that directory or in some subdirectory of it. Only files in the publish directory become “deployed” and are therefore part of the site.
Only deployed files appear in the Large Media tab. Files which are part of the repo but are not part of the deploy will not be shown on the Large Media tab.
The issue here is that I don’t see media file being put into the dist directory (or some subdirectory of it). “Why not?” is the question and that is my question for you.
I don’t know anything about your site build. If the media file doesn’t get places somewhere in or under dist, then that is up to you to find out why and correct.
Based on the build logs I think the file is brainloop1.mp4 and it also appears your build could be embedding that video into the HTML itself (as base64 encoded data). Is that what it does? If that is the case, you won’t be able to use Large Media for this site.
One of the limitations of Large Media is this:
- Files tracked with Large Media are uploaded directly to the Netlify Large Media storage service on push, completely bypassing the site build. This saves build time, but also means that the files are not available to tools that process asset files during the build, such as Hugo’s image processing or the
gatsby-imageplugin. Depending on your needs, you may be able to replace this functionality with Netlify’s image transformation service.
If your site build is trying to embedded the video, it can’t because the raw video doesn’t exist inside the build image. It only exists on the deployed site and then only if the file is copied to the publish directory (which is dist for your site).
So, you will first need to determine what you build process actually does with this file. Then, once you confirm that this is the issue you will need to decide if you will be changing the build not to embedded the file in the HTML or if you will stop using Large Media.
Note, you can use Git LFS and embedded the video. The limitation of “no build time access to raw Git LFS data” is specific to Large Media but is does not affect third-party Git LFS services (because we do download the raw data with third-party services).
There will likely be other questions so please let us know if there are and we will be happy to answer.
thanks for the info that was helpful. No, it is not embedding it in the HTML, but the video in the dist was a different video with different name, the one I was using way before, than i had in the HTML code. That must’ve made the confusion, I am going to delete this one and deploy it again with the correct specs and see what that does.