Video de Fundal Pe Pagina Hero
Video de Fundal Pe Pagina Hero în GeneratePress – Adăugarea unui videoclip de fundal la Pagina Hero (Element de antet) este foarte ușoară. Trebuie doar să adăugăm ceva HTML în zona de conținut și să adăugăm ceva CSS pe site-ul nostru.
Primul lucru pe care trebuie să-l facem este să ne structurăm HTML-ul în conținutul nostru Element. Iată un exemplu:
<video loop muted autoplay playsinline poster="URL/TO/poster.jpg" class="background-video"> <source src="URL/TO/video.mp4" type="video/mp4"> <source src="URL/TO/video.webm" type="video/webm"> <source src="URL/TO/video.ogv" type="video/ogv"> </video> <div class="background-video-content"> Your Element content in here. </div>
În HTML-ul de mai sus, veți observa câteva opțiuni diferite pe care le-am adăugat:
- loop – Acest lucru va face bucla video la infinit.
- muted – Acest lucru va dezactiva orice sunet pe care îl poate avea videoclipul.
- autoplay – Acest lucru va face ca videoclipul să înceapă redarea imediat ce pagina se încarcă.
- playsinline – Acest lucru va face ca videoclipul să fie redat automat pe mobil.
- poster – Aceasta este adresa URL către o imagine alternativă care se va afișa în timp ce videoclipul se încarcă.
Veți observa, de asemenea, că avem trei videoclipuri diferite în elementul nostru video. Este necesar doar unul.
Acum că HTML-ul nostru este configurat, putem adăuga CSS:
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
.page-hero {
position: relative;
overflow: hidden;
}
.background-video-content {
position: relative;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}Toate cele de mai sus sunt plug-and-play, cu excepția opțiunii de opacity. Adăugarea opacității va permite culorii de fundal să suprapună elementul video.
