Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where.

I have attempted to include the video in the same folder as my signup.hbs file, but it is still not displaying.

signup.hbs:

<!DOCTYPE html>
<html>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <head>
        <title></title>
    </head>
    <body>
        <div class="site-style">
        <div class="fullscreen-bg">
            <div class="main-log">
                <form id="signup" name="signup" method="post" action="/signup">
                    <label for="email">Email Address</label>
                    <input class="text" name="email" type="email" />
                    <label for="firstname">Firstname</label>
                    <input name="firstname" type="text" />
                    <label for="lastname">Lastname</label>
                    <input name="lastname" type="text" />
                    <label for="password">Password</label>
                    <input name="password" type="password" />
                    <input class="btn" type="submit" value="Sign Up" />
                </form>
            </div>
            <video loop muted autoplay poster="video/plane.jpg" class="fullscreen-bg__video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
                <source src="club_v.mp4" type="video/mp4">
            </video>
        </div>
    </body>
</html>

structure_of_program

The video_v.mp4 file can be found in the \app\views folder.

Despite my efforts, the video is still not appearing on my page.

Answer №1

To transfer the video file (e.g video_v.mp4) to the public folder, where other static assets such as css-files are located.

After that,

<source src="video_v.mp4" type="video/mp4">

It should be functional.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click to make the arrow come to life through animation!

I am brand new to coding and this is my inaugural code snippet: .container_menu { position: relative; top: 0px; left: 0px; width: 25px; height: 25px; } .container_menu .line-1 { background-color: black; width: 59%; height: 2px; positio ...

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

What are the steps to ensure HTML5 video fills the entire height and width of the browser window?

Is there a way to make a video fill the entire width and height of the browser on first page load using bootstrap? I am currently facing some issues with achieving this. The code that I have been using seems to work, but the height ends up being more than ...

Is there a way to configure Playwright to open chromium as the default browser instead of using CDP?

let current_context_number = {}; async function getBrowserContext(id) { let con = await lock.acquire("browser" + id, async () => { if (!(id in current_context_number)) { current_context_number[id] = 0; } ...

Looking for a Search Field that clears default text when focused - Compatible with Firefox 3.6?

I have attempted various jQuery and JavaScript solutions found on this page: How to clear text field on focus of text field Surprisingly, all of the solutions work except for FF 3.6. So, I am wondering, What alternative can I use to make this feature com ...

Creating a dynamic HTML template and binding data to it in order to send personalized emails using Node.js

I am currently utilizing Nodejs on the server, along with the nodemailer npm module, to send HTML email content to users. I am in need of a template to streamline the email sending process. Rather than constructing HTML strings directly on the server side ...

How can Next JS automatically route users based on their IP address?

Currently, I am using express and the following method within app.get('/anyPath') to identify the IP address of the client: var ip = req.headers['x-real-ip'] || req.connection.remoteAddress if (ip.substr(0, 7) == "::ffff:") { ...

What are the steps for combining two constants with the JSON format of "const = [ { } ]"?

Here is the initial code that I would like to merge with another section. const sections = [ { title: section1_title, rows: [{ title: section1_option01, rowId: "sec1_option01", ...

Error thrown: The client password must be in string format for SASL SCRAM-SERVER-FIRST-MESSAGE

Attempting to link my database with express, encountering this error message on PostgreSQL: throw new Error('SASL: SCRAM-SERVER-FIRST-MESSAGE: client password must be a string' If anyone has successfully resolved this issue before ;) ...

reasons why mongoose doesn't modify mongodb

My MongoDB server is running with the command: sudo mongod --port 27111 However, my Mongoose code does not seem to be working with MongoDB. There have been no changes in MongoDB from the Mongo shell perspective. $mongo 127.0.0.1:27111/foo ...

Is the express-session expiration object not the appropriate data type?

Occasionally, my nodejs program — which is built with the express v4.12.2 and express-session v1.13.0 packages — encounters a TypeError exception leading to a crash: /app/node_modules/express-session/node_modules/cookie/index.js:136 if (opt.expires) ...

What is the best way to get the number of populated children in a Mongoose schema?

Hello all, I am just beginning to learn about MongoDB and Mongoose. Does anyone know of a simple method to count the answers for each topic after using the population method? var query = Topic.find({}); query.select("title answersRef"); query.populate({p ...

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

Encountering an obscure package error while attempting to install an NPM package

After running the following command on my node application: npm install --save-dev typescript I encountered this error message: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563a3f3426271667786e786e">[email pro ...

A guide on cropping and uploading images using ejs and Node.JS

Currently I am utilizing JQuery to crop an image. <link href="/public/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /> <!-- add scripts --> <script src="http://code.jquery.com/jquery-1.9.0.js"></script& ...

Module 'gulp-util' could not be located

I am encountering difficulties with gulp. I am utilizing laravel/elixir, which has gulp as one of its dependencies. Despite following the steps outlined here Can't get Gulp to run: cannot find module 'gulp-util', I have not been able to resolve ...

Bot on Discord engaging in a gaming session

I recently developed a Discord bot with the status of ""playing a game"" and here is the code that I implemented: bot.on('ready', () => { console.log('Client is online!'); bot.user.setActivity('osu!'); Th ...

Why does babel-node encounter a "module not found" error when the ".js" extension is not included?

Why is babel-node not importing without the ".js" extension? I have "type": "module" in my package.json import example from "./src/example.js"; works fine import example from "./src/example"; does not work --es-module-specifier-resolution=node only works ...

I'm attempting to store the information from fs into a variable, but I'm consistently receiving undefined as the output

I'm currently attempting to save the data that is read by fs into a variable. However, the output I am receiving is undefined. const fs = require("fs"); var storage; fs.readFile("analogData.txt", "utf8", (err, data) =&g ...

Uploading a CSV file in JSON format to Amazon S3 with Node.js

Within my nodejs server.js script, the following code snippet can be found: router.post('/submission', (req, res) => { let data_filtered = req.body.data }) Upon user submission of a csv file, I am successfully retrieving it on the backend. ...