HTML / CSS видео в качестве фона для заголовка

Question

HTML / CSS видео в качестве фона для заголовка

Причина в том, что идентификатор или строгий оператор (===), он сравнивается без преобразования типа, это означает, что если оба значения не имеют одинакового значения и одного и того же типа, они не будут считаться равными.

взгляните на эту ссылку, вы не можете сомневаться , чтобы понять, как работает оператор-идентификатор

0

javascript html css

задан stax 15 January 2019 в 23:38

1 ответ

Другие вопросы по тегам:

javascript html css

Похожие вопросы:

score 0 · Answer 1

Это можно сделать, однако есть несколько вещей, на которые следует обратить внимание:

Не загружать видео с YouTube. Вместо этого рассмотрите возможность использования статического видеофайла (например, https://www.w3schools.com/html/mov_bbb.mp4 , как показано ниже). Это даст вам больший контроль над автоматическим воспроизведением видео (что важно, поскольку по умолчанию элементы управления воспроизведением недоступны)
Вам нужно будет сделать несколько ревизий. к вашему CSS - ключевые изменения, о которых нужно знать, будут следующие правила для вашего элемента video:

    z-index:-1; /* Causes the video to sit behind your heading */
    object-position:center; /* Causes video to be centred against the header */
    object-fit:cover; /* Causes video to cover/stretch to the header */

Чтобы обеспечить автоматическое воспроизведение видео, вы ' Я хочу добавить атрибут muted к элементу видео, чтобы гарантировать, что автозапуск не заблокирован браузером

<video autoplay muted loop src="https://www.w3schools.com/html/mov_bbb.mp4" ></video>

Вот рабочий фрагмент, чтобы продемонстрировать эти идеи в действии :

* {
  box-sizing: border-box;
}

body {
  background-color: black;
  margin: 5px;
}

header {
  position: fixed;
  font-family: Arial;
  color: white;
  width: 98%;
  margin: 10px;
  border: 1px solid white;
  background-color: black;
  /* Add this */
  text-align: center;
  overflow: hidden;
}

header h1 {
  border: 1px solid black;
  background-color: black;
  padding: 2px;
  font-size: 5.5em;
  font-weight: bold;
  letter-spacing: 11px;
  text-align: center;
  /* Add this */
  display: inline-block;
}


/* Update this */

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-position: center;
  object-fit: cover;
}

<body>
  <header>
    <h1>EMINƎM</h1>
    <video autoplay muted loop src="https://www.w3schools.com/html/mov_bbb.mp4">
            </video>
  </header>
</body>