Привет, ребята, добро пожаловать в наш блог. В сегодняшнем блоге мы увидим, как создать добавление Текстовое фоновое видео в HTML и CSS.

Много раз мы давали заголовок наложенному видео, и видео воспроизводилось в фоновом режиме, а текст появлялся на видео, поэтому мы создавали этот текст поверх видео с помощью HTML и CSS.

Итак, давайте начнем наш проект «Текст поверх видео», добавив исходные коды. Для этого, во-первых, мы используем HTML-код.

HTML-код для текста поверх видео

<video playsinline autoplay muted loop>
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  	<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video">
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<header>
  <nav>
    
    <a href="#">Shop</a>
    <a href="#">Stores</a>
    <a href="#">Products</a>
  </nav>  
</header>
<div class="overlay">
  <h2>Meet the crazy-smart women we asked.</h2>
</div>

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

После этого мы закрываем теги навигации и заголовка, а затем добавляем основную часть, которая представляет собой текст, используя h2 внутри класса div.

Итак, теперь мы создаем текст для наложения его на фон видео, используя данный код CSS.

CSS CODE для текста поверх видео

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}
body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}
header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}

Позвольте мне объяснить этот код пошагово, чтобы его было легко понять. Итак, начнем.

ШАГ 1.На первом этапе мы импортируем шрифты с помощью свойства import, а затем добавляем фон, поля и семейство шрифтов, чтобы создать стильные шрифты, правильное выравнивание и привлекательный фон.

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

Код для приведенного выше объяснения.

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}
body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

ШАГ 2.На втором шаге мы выравниваем текст по центру, добавляем прозрачный фон и цвет текста, чтобы он выделял слово, наложенное на фон видео. Некоторые значения, такие как веб-кит, выравнивание содержимого по центру и фиксация его с фоном.

Теперь мы начали стилизовать слово для наложения на него, добавив фон, цвет шрифта, толщину, поля и смешанный режим наложения, чтобы реализовать наложение текста. Добавьте значение в соответствии с нашими требованиями.

.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}

ШАГ 3.На этом последнем шаге мы стилизуем панели навигации, добавляя фон и выравнивая их по центру, а затем задавая привлекательные цвета шрифта с размерами. Код для объяснения не работает.

header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}

Теперь мы успешно добавили исходный код проекта. Итак, теперь мы можем просматривать проект в данном разделе вывода.

Теперь мы успешно создали наше Видео с наложением текста с использованием HTML и CSS. Вы можете использовать этот проект для своих нужд персонала, и соответствующие строки кода приведены со ссылкой на ручку кода, упомянутую ниже.

Если вы обнаружите, что этот блог полезен, обязательно поищите в Google код со случайным кодом для интерфейсных проектов с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.

REFER CODE —Передача кода

АВТОР:Рагунатан С.

Какой редактор кода вы используете для наложения текста на кодирование видео?

Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.

Является ли этот проект адаптивным или нет?

ДА! это адаптивный проект

Используете ли вы какие-либо внешние ссылки для создания этого проекта?

No!