Adding A Video Background To Django

Using Django Templates & Frontend
1

Hi everyone.

Is it possible to add a video background to my Django application?

2

Django exists to create web pages to be displayed by a browser. If you can identify the html necessary for what you want to do, you can use Django to create it.

However, what you don’t want to do is try to stream video using Django. If the video is small enough to be sent in a single request, great. But if the video is so large that it needs to be streamed, then you’ll want to plan on having some other process available to do that streaming.

(Yes, Django does have a StreamingHttpResponse object, but read the notes about it carefully. It’s not something you should plan to use for many users at once.)

3

Suppose I wanted to set the following image as the background image for one of my web pages in django: antalya.png

The following are my directories:

django_project (directory):
django_project (directory)
users (directory)

I have put antalya.png inside the directory called “img”.
Inside django_project → django_project → static → img:
antalya.png

The following is the code I am using to display the antalya.png image as the background inside users → templates → users → facial-login.html:

{%load static %}

<h1Hello lad

Inside django_project → django_project → settings.py:
STATICFILES_DIRS = [os.path.join(BASE_DIR, ‘static’)]

For some reason, the image antalya.png is not showing up as the background image when I load the facial-login.html template in the web browser while running the django development server.

4

Your code here is being mangled by the forum software. I can’t see what you’re trying to reference here.

Single lines of code can be marked between single backticks - `
The first and last characters of this line are backtick characters

Multiple lines of code and templates are fenced between lines of three backticks:

The line above this is ```
<h1> This is a header </h1>
The line _after_ this is ```

Besides this, if the log you posted earlier is accurate, you’re not even trying to load the file. You need to visually inspect the html after it has been rendered to ensure the browser is getting what you think you’re sending.

5

Thank you. I will try to understand this.

6

Just to clarify about when you said before, if I can set an image as the background in an HTML page, then I can use the same code for django?

I apologise if it was naive of me to do this, but I tried to follow the instructions laid out in the following video: How to add background image in Django | Staticfiles setup| - YouTube

7

Yes.

Django produces HTML.

If you have HTML that uses an image as a background, you can use Django to create that HTML.

8

Thank you. I appreciate your help.

9

Hi. The following HTML code inside the ‘facial-login.html’ file that I wrote will successfully display the video background in a browser when I simply right click on the file and select “Open With Google Chrome”:

Webcam 
  <style>
      .video-wrap
      {
          /*Setting the margin to 'auto' will position the box to be in the exact center
          of the web page.*/
          margin: auto;
          left: 0;
          right: 0;
          position: absolute;

          /*We are setting the dimensions of the box that will contain the camera.*/
          width: 450px;
          height: 450px;
          border: 10px solid greenyellow;
          text-align: center;
          /*width/height of box = 430px(camera width) + 10px*2 (total border width) = 450px*/
      }

      h2 
      {
          text-align: center;
      }
  </style>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="facial-login-style.css">

The same cannot be said when I navigate to the ‘facial-login.html’ template when running and accessing my django development server. With the same code, the video background does not show in the background when I access that same html page through django’s web server.

Any ideas as to what the problem is?

facial-login.html is inside the django_project → users → templates → users directory.

10

The following is an extension of the code inside the ‘facial-login.html’ file:

<div class="facial-login-video-background">
  <video autoplay loop muted plays-inline class="facial-video">
      <source src="images/video.mp4" type="video/mp4">
  </video>
Click the button to take a facial image of yourself (be sure to look straight into the camera). 
  <div id="snap">
      <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-camera"></span> Camera
      </a>
  </div>

11

You need to verify, in your browser, that the HTML you are receiving from the server is the same HTML you get when you load it locally.

Since you are referencing static files from this html, you also need to verify that Django is retrieving those files and sending them to the browser.

12

You need to verify, in your browser , that the HTML you are receiving from the server is the same HTML you get when you load it locally.

Yes, how can I do this? By clicking “View page source”.

13

If you’re not using AJAX to update the page, that should be good enough. Otherwise, you’ll want to use your browser’s developer tools.