static-site-boilerplate
static-site-boilerplate copied to clipboard
Video isn't being loaded during production.
Describe the bug
I have a video in my HTML using a <video>
tag. I have an mp4 file but when I do a production build, it doesn't get translated over.
To Reproduce Steps to reproduce the behavior:
- Insert a video tag with an mp4 file linked.
- Run a production build or deploy to netlify.
- Look at the video, it will result in a 404.
Expected behavior The video should be loaded in.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Mac OS Catalina
- Browser Chrome
- Version [e.g. 22]
Additional context I see that there is an attempt to load the videos over. in the loaders file.
Here is how I solved my issue.
I first had to import the file in my scripts:
import '../images/housedrone.mp4';
Then the webpack build would add a hash to the file name which would cause it to not be read under the source of the video. So in the loaders.js
file, i replaced the video section with this:
const videos = {
test: /\.(mp4|webm)$/,
use: [
{
loader: 'file-loader',
query: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
};
Now it works, but I don't know if this is the best solution, just one that works for me now.
The mentioned
Updating html-loader
up to the 1.3.2 version worked for me