1. Første ting først, ikke glem å laste opp de nødvendige videofiler til webserveren. største nettstedene Anbefales også:
Hvor å konvertere videofiler for HTML5
Hvordan bruke FileZilla FTP klient
2. For HTML-delen, skriver de tre følgende linjer mellom < body > og < /body > tags:
< video id = "video_background" forspenning = "auto" autoplay = "true" loop = "loop" dempet = "dempet" volum = "0" &​​gt; < kilde src = "Dreevoo_com_SlowMo.webm" type = "video /WebM" > < kilde src = "Dreevoo_com_SlowMo.m4v" type = "video /mp4" > Video støttes ikke < /video >
Ikke glem å endre videoklipp navnene til din egen, og hvis du har lastet opp videoklippene til en annen mappe på en webserver og deretter sette mappenavnet foran video klipp, for eksempel:
< kilde srce = "video /videoclip.m4v" type = video /mp4 "> ...
Ikke bli forvirret av m4v videofil, det er ganske mye det samme avtale som mp4 Hvis du lastet opp mp4 fil, deretter inn mp4 stedet for m4v
3. I CSS-filen gjør du følgende én linje:
#video_background {posisjoner:.. absolutt, bunn: 0px; høyre: 0px; min-width: 100%; min-høyde: 100%; width: auto; høyde: auto; z-index: -1 000; flow: hidden; }
Anbefales også:
Responsive fullskjerm bakgrunn kun ved hjelp av CSS
Sett opp Custom Font på en webside
4. Og det er det!
Du kan sjekke ut HTML5 nettside fullscreen video fra denne opplæringen, og her er den CSS-filen du kan laste ned og bruke på din vilje
Du ønsker kanskje å legge et mønster bildeoverlegg.
Transparent mønster over nettstedet bakgrunn med CSS
<