I’m encountering an issue with static files in my Flask application and would appreciate some guidance on resolving it as I have almost no experience in web development.
I apologize if I’m not explaining things well, but here’s a summary of the problem:
Problem:
When attempting to load static files (mp4 video) on my Flask website, I’m consistently receiving a 404 error. Despite ensuring correct file paths and permissions, I’m unable to resolve the issue, I realize there are a lot of questions already about serving static files but the solutions presentes are not working and the situations are a bit different as I only want to add a background video to my website.
Here’s the relevant code snippets from my Flask application:
Flask application setup
app = Flask(__name__)
app._static_folder = '/static'
HTML/CSS for background video
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode Wall Control Server</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
#mainContent {
padding: 20px;
}
/*Video Background */
#backVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
}
</style>
</head>
<body style="background-color: #b8b7b74f;">
<video autoplay loop muted id="backVideo">
<source src="{{url_for('static', filename='barcode.mp4')}}" type="video/mp4">
</video>
</body>
My terminal shows the following error message when attempting to load the static files:
[15/May/2024 14:38:46] "GET /static/barcode.mp4 HTTP/1.1" 404
PS. When I run the html code directly without the server the video loads without a problem.