Как сделать HTML видео фон с помощью наложения текста отзывчивым

Question

Я не могу сделать фоновое видео с оверлеем и текстом адаптивным.Уменьшить разрешение ширины текста не уменьшается, но обрезается с помощью опции скрытия переполнения, я считаю.Не помогает, если я удаляю параметр размера шрифта

Кроме того, если я попробую в Safari, видео не будет хорошо минимизироваться или вообще получится, что страница обрезается с правой стороны.

По идее www.fc-squad.de изображение в середине должно быть заменено видео.Хотя страница не очень ответственная, все нормально, только с изображениями.

pS: возможно, я испортил много кода, методом проб и ошибок вставьте код, удалите, если результат был плохим

/* ViDEO Background Section */

.callout {
    position: relative;
    overflow: hidden;
margin: 20px 20px 20px 20px;
min-width=600px:

}

 /* Style of the the video */
#myVideo {
  height: auto;
  width: auto;
  vertical-align: middle;
  width: 100%;
  height: 100%;
border: 1px solid slategrey;
border-radius: 5px;
   display:inline-block;
    overflow: hidden;
  z-index: -1000;


}

/* some content over the video */
.content {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
  color: #f1f1f1;
    width: 100%;
height: 100%;
  vertical-align: middle;
 text-align:center;
  align-items: center;
  justify-content: center;
text-shadow: 0px 0px 3px #272D0B;

}

<section class="callout">

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="squad-alpha11.mp4" type="video/mp4">
</video>

<!-- some overlay text to describe the video --!>
<div class="content">
  <span style="font-size:36px"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:28px"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:20px"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:18px"><h4>TEXT TEXT TEXT</h4>


<a class="button" href="url-to-topic">Call to Action</a>
</div> 

</section>

---

Обновление:

Отлично, текст работает намного лучше

маленькое и большее окно (Firefox), см. Здесь видео-контейнер с небольшим разрешением и видео-контейнерсреднее разрешение

Но в разделе «Видео и весь DIV» есть проблемы с Safari / iOS ... да, страница обычно не оптимизирована, но она рендерила картинки по крайней мере

Но видеообрезать, не играть автоматически (вы должны щелкнуть по воспроизведению) и текст ниже не как наложение.Экран Safari

Я читал, что лучше сделать статичный снимок для маленьких экранов, или есть простое решение для Safari?

Answer 1

используется обновление для информации - для лучшей возможности поиска

Текст теперь масштабируется с небольшим разрешением работает также на средних

Но все еще проблема в Safari Safari Cut of Video

Answer 2

Если проблема заключается только в том, что размер текста не изменяется, вы можете попробовать использовать vw вместо px , который уменьшается в зависимости от ширины вида.

replaceВаш текст содержит:

<span style="font-size:4vw"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:3.2vw"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:2.2vw"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:1.7vw"><h4>TEXT TEXT TEXT</h4>

, дайте мне знать, потому что я не понял, есть ли проблемы и у самого видео.