Не получается вставить видео на страницу вместо или поверх картинки в django-проекте

Question

Есть проект django. На главной странице выводится фон из картинки image.jpg, которая находится в папке static/img. Код следующий:

{% extends 'base.html' %}
{% block style %}
{% load static %}
<style>
  .form-check{
    line-height: 3.2;
  }
</style>
{% endblock %}

{% block header %}
<div class="page-header header-filter purple-filter" data-parallax="true"
   style="background-image: url('{% static 'img/image.jpg' %}'); transform: translate3d(0px, 0px, 0px);">
</div>

Пытаюсь заменить эту картинку на видео video.webm, которое расположено в той же папке или поместить видео поверх картинки:

{% extends 'base.html' %}
{% block style %}
{% load static %}
<style>
  .form-check{
    line-height: 3.2;
  }
</style>
{% endblock %}

{% block header %}
<div class="page-header header-filter purple-filter" data-parallax="true"
<video playsinline="" loop="loop" autoplay="autoplay" muted="muted" preload="auto">
          <source src="http://ip-адрес/static/img/video.webm" type="video/webm">
</video>
</div>

Заменяю одну строчку, в которой вставляется картинка на блок, в котором вставляется видео, но видео не появляется на страничке. Наверно, нужно добавить в файл css стили для блоков page-header, header-filter, purple-filter, нашел эти блоки, но на что их заменить для видео? Перепробовал разные варианты. И может быть дело в type="video/webm", этот блок с видео брал с другого сайта и в моем проекте нет папок video и webm.

Answer 1

Удалось вставить видео. Но есть проблема: надпись "Web-сервис", которая была поверх картинки фона image.jpg, в отдельных браузерах улетела вправо далеко, как будто ее вытеснило видео, или в некоторых браузерах появляется на доли секунды и исчезает, как будто находится под видео. Без видео надпись "web-сервис" ровно по центру на картинке фона image.jpg. И в браузере сафари на маке и на айфоне видео не появляется. Вот код:

 {% extends 'base.html' %}
    {% block style %}
    {% load static %}
    <style>
      .form-check{
        line-height: 3.2;
      }
    </style>
    {% endblock %}
    {% block header %}
    <div class="page-header header-filter purple-filter" data-parallax="true"
    style="background-image: url('{% static 'img/image.jpg' %}'); transform: translate3d(0px, 0px, 0px);">
    <div id="videoContainer">
        <video playsinline="" autoplay="autoplay" loop="loop" muted="muted" preload="auto">
            <source src="http://ip-адрес/static/img/video.mp4" type="video/mp4">
            <source src="http://ip-адрес/static/img/video.webm" type="video/webm">
        </video>
    </div>
      <div class="container">
         <div class="row">
          <div class="col-md-8 ml-auto mr-auto">
            <div class="brand text-center">
              <h1>Web-сервис</h1>
            </div>
          </div>
        </div>
      </div>
    </div>

CSS

.videoContainer {
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}
video {
    width: 100%;
    height: auto;
    max-height: 100%;
}

БЛОГ НА HUSL

Не получается вставить видео на страницу вместо или поверх картинки в django-проекте

Ответы (1 шт):