Hej, witajcie na naszym blogu. W dzisiejszym blogu dowiemy się, jak utworzyć dodatek „tekstowy film wideo w tle”w formacie HTML i CSS.

Wiele razy podajemy tytuł na nakładce wideo, a wideo odtwarza się w tle, a tekst pojawia się na filmie, więc tworzymy ten tekst na wideo za pomocą HTML i CSS.

Zacznijmy więc nasz projekt tekstowy nad wideo od dodania kodów źródłowych. W tym celu po pierwsze używamy kodu HTML.

KOD HTML dla tekstu nad wideo

<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>

Teraz w tym kodzie dodajemy wideo jako tło za pomocą tagu wideo i jego atrybutów, następnie otwieramy nagłówek i tag nawigacyjny, a wewnątrz nich dodajemy pewne linki za pomocą tagu zakotwiczenia, który służy do nawigacji spinki do mankietów.

Następnie zamykamy znacznik nawigacyjny i nagłówek, a następnie dodajemy główną część, którą jest tekst, używając h2 wewnątrz klasy div.

Teraz tworzymy tekst, który będzie nakładany na tło wideo, używając podanego kodu CSS.

KOD CSS dla tekstu zamiast wideo

@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;
}

Pozwól, że wyjaśnię ten kod w kilku krokach, aby łatwo go zrozumieć. Zacznijmy więc.

KROK 1:W pierwszym kroku importujemy czcionki za pomocą właściwości import, a następnie dodajemy tło, margines i rodzinę czcionek, aby uzyskać stylowe czcionki, odpowiednie wyrównanie i atrakcyjne tła.

Następnie po prostu dodajemy szerokość, wysokość, górę i lewo w celu wyrównania, a następnie ustalamy pozycję dla wartości bezwzględnej. Na koniec dodajemy właściwości obiektu, które sprawiają, że użytkownik wideo jest interaktywny i pomocny.

Kod powyższego wyjaśnienia.

@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;
}

KROK 2:W drugim kroku wyrównujemy tekst do środka, dodajemy przezroczyste tło i dodajemy kolor tekstu, dzięki czemu podświetla on słowo nałożone na tło wideo. Niektóre wartości, takie jak zestaw internetowy, uzasadniona treść, aby wyrównać ją do środka i przymocować do tła.

Teraz zaczęliśmy stylizować słowo do nałożenia, dodając tło, kolor czcionki, wagę, margines i tryb mieszania, aby nakładka tekstowa została zaimplementowana. Dodaj wartość zgodnie z naszymi wymaganiami.

.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;
}

KROK 3:w tym ostatnim kroku stylizujemy paski nawigacyjne, dodając tła i wyrównując je do środka, a następnie tworząc atrakcyjne kolory czcionek o odpowiednich rozmiarach. Kod wyjaśnienia jest wyłączony.

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;
}

Teraz pomyślnie dodaliśmy kod źródłowy projektu. Możemy więc teraz obejrzeć projekt w danej Sekcji Wynikowej.

Teraz pomyślnie stworzyliśmy nasz Nakładka wideo z tekstem przy użyciu HTML i CSS. Możesz wykorzystać ten projekt do swoich potrzeb personalnych, a odpowiednie linie kodu są podane pod linkiem do pióra kodowego wymienionym poniżej.

Jeśli uznasz, że ten blog jest pomocny, pamiętaj o losowym wyszukiwaniu kodu w Google w poszukiwaniu projektów Front End z kodami źródłowymi i pamiętaj o podążaniu za stroną Kod z losowym kodem na Instagramie.

KOD REFERU —Przekazywanie kodu

NAPISANE PRZEZ —Ragunathan S

Którego edytora kodu używasz do kodowania nakładki tekstowej na wideo?

Osobiście polecam korzystanie z VS Code Studio, jest proste i łatwe w użyciu.

Czy ten projekt jest responsywny czy nie?

TAK! jest to projekt responsywny

Czy do tworzenia tego projektu korzystasz z jakichkolwiek linków zewnętrznych?

No!