Sådan integreres en hero-baggrundsvideo på dit websted

Lær, hvordan du bruger en videobakgrund i dit websteds heltesektion & hvorfor det i høj grad kan øge konverteringsfrekvensen for din virksomhed.


Sådan integreres en heltevideobaggrund

Det er ingen hemmelighed, at videoer er utroligt effektive til at fremme publikums engagement på nettet. Folk reagerer på og husker visuals i en svimlende højere hastighed end når de samme oplysninger præsenteres gennem ord. Vores hjerner behandler blot billeder hurtigere – for ikke at nævne oplevelsen af ​​at se en video er sjov, spændende og – helt ærligt, afhængig. Publikum deler en umættelig sult efter indtagelse af videoindhold, og det forventes derfor inden for to år 80% af al webtrafik vil være bundet til video!

Moderne webdesign ser et enormt skub i retning af at erstatte stillbilleder med mere dynamisk visuals.

Klik for at tweet

Det er ikke kun ord, der oplever en stor udrensning. Moderne webdesign ser et enormt skub i retning af at erstatte stillbilleder med mere dynamisk visuals. Borte er de dage, hvor statiske websider med tekst og fotos var nok til at tilfredsstille brugerinddragelse. Videoen er der, hvor det er – og det er nu på tide at spørge sig selv, om dens fravær på dit websted fortsat kan ignoreres.

Måske er den vigtigste grund til, at du endnu ikke har taget højde for formatet, på grund af det opfattede tekniske kompleksitet. Selvom der muligvis kræves yderligere prep og optimering for at få videoer på dit websted, er processen blevet gjort tilstrækkelig lettere i de sidste par år med forskellige plugins og HTML5.

For hjælp til at forstå, hvordan du integrerer videoer på dit websted, er denne vejledning her for at vise dig, hvad du har brug for at vide for at skabe en overbevisende visuel oplevelse, som brugerne ikke snart vil glemme.

Baggrundsvideoen “Hero”

Når vi taler om indlejring af videoer på dit websted, taler vi ikke kun om nogen form for video placeret på et vilkårligt sted. Denne artikel handler specifikt om at bruge en populær og effektiv tendens inden for webdesign kaldet the hero baggrund video.

Her er et eksempel:

Eksempel på bevægelse og eventyr, som en videobakgrund kan nåHer er et godt eksempel ved hjælp af en hero-baggrundsvideo. Som du kan se, giver videoen en følelse af bevægelse og eventyr til dette cykelbutik som stillbilleder bare ikke kunne opnå.

Vi har tidligere nævnt begrebet brug af heltebilleder i “over folden”-Området på din webside. For de uindviede er et heltebillede (eller nogle gange kaldet banner) ofte det første, folk ser, når de ankommer til dit websted, hvor dets vigtigste indhold præsenteres på en kort og visuelt slående måde. Dette primære afsnit fylder typisk hele skærmens bredde og højde med et slankt baggrundsbillede, hvilket giver masser af åben plads omkring en kritisk opfordring til handling-knap eller link.

Det samme koncept gælder her, bortset fra åbenlyst, nu erstatter vi baggrundsbilledet med en video. Dette kan i første omgang virke som en relativt ubetydelig ændring: Okay, så vi plejede at have et foto af en person, der kørte på en cykel, men nu har vi en video af cyklen i aktion og bliver taget med på en tur – big whoop, højre?

At se et enkelt øjeblik i bevægelse kan skabe en enorm indflydelse på, hvordan brugerne vil opfatte og engagere sig i dit brand.

Klik for at tweet

Det viser sig, at det at se et enkelt øjeblik i bevægelse kan skabe en enorm indflydelse på, hvordan brugerne vil opfatte og engagere sig i dit brand. Videoer inspirerer til følelser og handling hurtigere end noget andet medium. Hvis konvertering er dit hovedmål, kan en baggrundsvideo være den hemmelige sauce til et vellykket websted.

Hvorfor bruge en baggrundsvideo?

Der er overvældende bevis, der illustrerer, hvor magtfulde videoer kan være for en virksomhed. Her er nogle fristende statistikker delt af Forbes det skal tjene som motivation:

  • Indlejring af en hero-baggrundsvideo på din destinationsside kan øge konverteringsfrekvensen med 80%
  • Produktvideoer hjælper med at påvirke 90% af kunderne, når de træffer en købsbeslutning
  • 64% af kunderne er mere tilbøjelige til at købe et produkt online, når de har set en video om det.
  • Den digitale marketingekspert James McQuivey vurderer det et enkelt minut videoindhold er værd 1,8 millioner ord.

Eksempel på en hero-baggrundsvideoForetrækker du at se Nationalparker, eller vil du hellere erfaring dem?

Så nu, hvor vi har fundet ud af, hvorfor videoindhold er så vigtigt, lad os endelig se, hvordan du får disse dårlige ting op på dit websted!

Integrering af baggrundsvideoer på dit websted

Det er rigtigt, at der er mange filformater at vælge imellem, forskellige niveauer af browserstøtte og forskellige metoder til at integrere videoer på en webside – men jeg vil forenkle dette så meget som muligt og bare fortælle dig kun de mest relevante oplysninger , trin for trin, for at opnå maksimal kompatibilitet for alle mulige brugere.

Selvhosting af din video Vs. Brug af en hostingtjeneste

Den første ting, du bliver nødt til at bestemme, er hvor videofilerne faktisk vil opholde sig: på dit websteds egen server (med andre ord din egen webhostingskonto) eller på en videohostingsplatform som YouTube eller Vimeo.

Nogle fordelene ved self-hosting video inkluderer at have en større frihed med, hvordan den er indlejret, lettere implementering ved at gøre videoen på fuld skærm og mere kontrol med at beskytte videoen bag en indtægtsportal (ansættelse af en dygtig back-end-udvikler ville være påkrævet til dette).

Nogle fordelene ved videoplatforme inkluderer lidt lettere indlejring, brug af hurtige servere i verdensklasse (som letter båndbredden på din egen server) optimeret specifikt til videofiler og mere udbredt delingsevne.

Normalt vil jeg til generelle videoer på et websted anbefale, at det er let at bruge en videoplatform til at tjene dit indhold, især hvis dit websted er i en delt hostingplan. Specifikationerne i en baggrundsheltvideo kræver dog visse indstillinger, der egner sig bedre til selvhosting. Du har muligvis dine grunde til at bruge en af ​​metoderne, så jeg giver instruktion til begge.

Metode 1: Selvhosting

Først skal videoen findes på din server. Vi diskuterer, hvilken type videofil du har brug for lidt – men for nu, nøjagtigt som at tilføje billeder, skal du bruge en FTP-program at uploade din videofil til din server.

Nu indsætter vi den korrekte kode på din webside for at tjene magien. HTML5 tillader brug af tag, der heldigvis erstatter Flash som det foretrukne webformat til videoer. Her er hvad vi har brug for for at oprette en ordentlig baggrundsvideo på fuld skærm:

HTML

Vælg kode

CSS

video # bgvideo {
position: fast;
top: 50%;
venstre: 50%;
min. bredde: 100%;
min-højde: 100%;
bredde: auto;
højde: auto;
z-indeks: -100;
-ms-transform: translateX (-50%) translateY (-50%);
-moz-transform: translateX (-50%) translateY (-50%);
-webkit-transformation: translateX (-50%) translateY (-50%);
transform: translateX (-50%) translateY (-50%);
baggrund: url (placeholder.jpg) ingen gentagelse;
baggrund-størrelse: dækning;
} Vælg kode

Der foregår ganske lidt her, så lad os se på, hvad disse indstillinger betyder.

playsinline

Dette holder videoen i browseren og ved siden af ​​dit indhold, hvilket er vigtigt for at forhindre, at den virkelig går i fuld skærm, hvor hele skærmen er optaget af videoen og intet andet.

automatisk afspilning

Du vil sandsynligvis have, at heroens baggrundsvideo skal afspilles straks, når siden er indlæst, uden at det er nødvendigt at trykke på en “play” -knap. Der er dog et par problemer med dette til mobile brugere, som jeg vil tale om senere.

dæmpet

Medmindre din video indeholder vigtige oplysninger i dens lydspor, er det bedst at slå din baggrundsvideo af. Folk har en ekstrem ubehag for at blive mødt med uventet lyd, mens de surfer på nettet, så det er bedre at slukke for lyden end at slukke for dine brugere.

loop

Valget af at afspille din video ved gentagelse skal træffes fra sag til sag. Hvis du ønsker en følelse af finalitet, hvor videoen afsluttes med en klar opfordring til handling uden distraktion, ville det være fornuftigt at forlade denne indstilling.

plakat

Levering af en billedfil her fungerer som en pladsholder, indtil videoen er færdig med indlæsning og afspilning. Det er op til dit skøn, hvad der ville være bedst at vise, hvad enten det er et stillbillede af videoens første ramme, eller noget som et logo eller banner.

Vores CSS indstillinger instruerer i det væsentlige browseren om at strække videoen på tværs af siden. Bemærk her er baggrund indstilling ved hjælp af vores samme plakat billede; dette fungerer som et visuelt tilbageslag, hvis en forældet browser ikke genkender ejendom.

Hvis du har til hensigt at vise tekst eller en opfordring til handling-knap over baggrundsvideoen, kan du derefter tilføje dem som normalt inden for div.

Metode 2: YouTube eller Vimeo

Brug af denne metode holder videofilerne væk fra dit websted, hvor de i stedet lever på dedikerede servere, der er specialiserede i videoindhold. Hvis du antager, at du allerede har uploadet din video, skal du nu bruge integreret link. For YouTube findes dette ved at trykke på knappen “del” på videoens side og derefter klikke på “integrer”. For Vimeo skal du på lignende måde klikke på “del” og derefter kopiere det integrerede link, der vises i popup-vinduet.

HURTIGTIPS: Når du bruger “del” -knappen, giver YouTube og Vimeo også muligheder for indstillinger som autoplay, loop og visning / skjul af afspillerkontroller. Sørg for, at du ikke går glip af disse for nemt at justere, hvordan din video vises. Vimeo kræver muligvis også yderligere indstillinger for at det fungerer ordentligt som en baggrundsvideo.

Du bemærker muligvis, at disse integrerede links er indeholdt i en iframe tag, der opfører sig lidt anderledes end vores HTML5-element. For at disse videoer skal fungere som baggrundsbilleder på fuld skærm, er vi nødt til at lave en lille finjustering med vores markering. Takket være en metode af Rishabh Aggarwal, der er en enkel løsning til at få dette til at ske:

HTML

Vælg kode

CSS

.videoContainer {
position: absolut;
bredde: 100%;
højde: 100%;
top: 0;
venstre: 0;
bund: 0;
højre: 0;
display: flex;
flex-retning: kolonne;
justify-content: center;
align-items: center;
}
#hero {
position: relativ;
}
iframe {
/ * valgfri * /
bredde: 100%;
højde: 100%;
} Vælg kode

Din YouTube- eller Vimeo-upload skal nu opføre sig som en funktionel baggrundsvideo bag dit heltindhold.

Brug af WordPress

Hvis du bruger WordPress, er der en forskellige videobaggrunds plugins der kan udføre ovennævnte opgave uden at bekymre sig om kode. De fleste af disse er imidlertid premium-plugins, som du muligvis skal købe.

Tip og bedste praksis til indlejring af videoer

Nu hvor din video er vellykket op og i handling, lad os grave lidt længere ned i vanskelighederne med optimering, filstørrelse og sikre, at din hero-baggrundsvideo ser ud og fungerer på sit bedste.

Forstå filtype

Jeg har sagt før, at der er mange muligheder i videofiltyper, der er tilgængelige, nogle af de mest populære er mp4, ogg, og WebM. Moderne browsere accepterer næsten universelt mp4 som det fremherskende format, så er det i det mindste den filtype, du skal inkludere. Det er dog normalt en god ide at sikre, at alle brugere får en lignende oplevelse, selvom de er på forældet software; i hvilket tilfælde din markering vil se lignende ud:

Vælg kode

HURTIGTIPS: Indsæt dit foretrukne filformat sidst på kildelisten. Dette er, hvad browseren læser sidst, og hvis brugerens enhed understøtter det, er det den, der skal indlæses.

En anden teknisk overvejelse er hvad videokodek at bruge, hvilket er dybest set, hvordan filen komprimeres og derefter tolkes af browserens medieafspiller. Den vigtigste codec, du skal være bekymret for, er H.264, hvilket er, hvad de fleste browsere accepterer, og hvilke websteder som YouTube og Vimeo understøtter.

Hvis alt dette lyder som forvirrende jargon, skal du ikke bekymre dig. Chancerne er, at din video allerede er i det ønskede MP4 / H.264 format. Dette er normalt den filtype, du får, når du downloader fra et lagervideo-websted. Hvis du har brug for at konvertere en anden filtype til mp4, skal du bruge yderligere software for at gøre det. Adobe Premiere Pro er branchestandarden for at arbejde med videoer, men dette er forståeligt nok ud over de fleste menneskers midler. Heldigvis er der et gratis program til pc og Mac, der kaldes Håndbremse det skal kun opnå det, du har brug for.

Et eksempel på en hero-baggrundsvideo med lydSamukawa-jinja-helligdom skaber en smuk og beroligende oplevelse med video (og lyd – men du kan se, hvorfor det i dette tilfælde er acceptabelt). Bemærk den smarte integration af video med deres navigationsmenu.

Optimering af din videofil

Det er sandsynligvis ikke en god ide at tage din video, som den i øjeblikket står og uploade den direkte til dit websted. Videofiler kan være store — endda 30 sekunders klip, hvis de er i high definition eller ultra definition. Husk, at dine brugere er nødt til at downloade disse filer til deres browser, før de afspilles, og at vente på en 50 megabyte video til at indlæse er ikke befordrende for en god brugeroplevelse.

Du bliver nødt til at finpusse din video løsning, bithastighed, og længde for at finpudse på en optimal filstørrelse. Tjek dette praktisk guide for en hurtig gennemgang af, hvordan man forbereder videoer til Internettet.

Så hvor stor er for stor? Det betragtes generelt som det 5 megabyte er den maksimale størrelse for en baggrundsvideo med filstørrelser mindre end 1 megabyte at være det ideelle. Dette kan være meget vanskeligt at opnå for at skabe en balance mellem kvalitet og størrelse. For det første skal du holde din opløsning på omkring 720p eller mindre for en god blanding af klarhed og økonomi. En skarp 4K-video ser måske smuk ud, men husk, at de fleste mennesker surfer på internettet på skærme under 15 ″, så den tilføjede opløsning ville bare være overflødig.

Med hensyn til længde ville en ideel runtime være et sted imellem 10–30 sekunder. Hvis den er for kort, kan din video føles triviel eller, hvis den er loopet, for gentagen. En video, der er for længe, ​​risikerer at miste brugernes opmærksomhed og gå op i filstørrelse.

Bitrate har en betydelig indflydelse på filstørrelsen, og det er sandsynligvis, hvad du vil bruge det meste af din indsats på at finpusse. At finde det ideelle nummer til din video er en proces, der ikke er omfattet af denne artikel, men YouTube og Vimeo giver retningslinjer for filoptimering her og her henholdsvis, der skal hjælpe dig med at styre dig i den rigtige retning.

Fjernelse af lyden

Som tidligere antydet er det at foretage UX-praksis at slå din baggrundsvideo til lyd. Hvis der virkelig ikke er nogen grund til, at lyd afspilles, kan du faktisk gå længere end at slå lyden fra og fjerne lydsporet helt fra filen. Hvis du gør det, reduceres filens størrelse kraftigt ved at slippe af med unødvendige data. Dette betyder mindre båndbredde på din server og hurtigere indlæsning for dine brugere. Håndbremse er en god mulighed for let at fjerne lydspor fra filer.

Autoplay og mobile enheder

Jeg nævnte, at der var et lille advarsel med at bruge autoplay-indstillingen til mobile brugere. Som en sikkerhedsforanstaltning for at forhindre uønsket dataforbrug vil mange mobiltelefoner nægte at afspille videoer på nettet automatisk. Det betyder, at en Play-knap integreres som et overlay oven på din baggrundsvideo. Selvom dette er en mindre gener, er den virkelige irritation, at dette overlay potentielt kan dække alle links eller indhold, du har placeret i din heltesektion. Doh!

Det ser ud til, at de nyeste versioner af iOS nu understøtter autoplay-funktionen, men mange Android-telefoner og andre mobile operativsystemer er stadig plettet. Selvom komplekse JavaScript-løsninger og browserhacks muligvis løser dette problem, er deres pålidelighed inkonsekvent og anbefales ikke helt. Den bedste løsning til den mest konsistente brugeroplevelse kan måske være at bruge en medieforespørgsel til at fjerne videoen helt på mobile enheder og erstatte den med dit pladsholderbillede. Det gør du i din CSS-fil:

@media-skærm og (max-enhedsbredde: 768px) {
#hero {
baggrund: url (placeholder.jpg) ingen gentagelse;
baggrund-størrelse: dækning;
}
#bgvideo {
display: ingen;
}
} Vælg kode

Kontrast tekst & video

For den bedste visuelle oplevelse, vil du sikre dig, at din tekst er læselig og skiller sig ud fra videoen bag den. Brug af lys tekst på en mørkere video eller mørk tekst på en lysere video vil sikre dig, at dine brugere ikke går glip af det vigtige indhold eller opfordring til handling fra din heltesektion.

Prøv at bruge videoer, der følger en bestemt farvepalet – endnu bedre, hvis disse farver matcher stilmærket for dit brand. En baggrundsvideo med for mange farver ser muligvis ud af sted på dit websted eller kan være for distraherende fra teksten ovenfor.

En effektiv metode til at ændre den visuelle tone i din video er at anvende overlays og filtre. Dette kan gøres gennem redigeringssoftware som Adobe Premiere eller endda på moderne browsere gennem CSS filter ejendom. Prøv at eksperimentere med farveoverlejringer, mætning, sløring og opacitet for at finjustere din videos æstetik, så den matcher dit brands stil og ikke distraherer fra teksten.

Eksempel på heltebaggrund med engagerende redigeringDet FreshDesign agentur bruger engagerende redigering til at formidle en essens og karakter, der er interessant at se uanset hvor mange gange det sløjfer. Farvefilteret kontrasterer også pænt med teksten og logoet.

Hvor finder du videoer til din baggrund

Du er nu klar til at tilføje en effektiv og perfekt optimeret baggrundsvideo til dit websted … undtagen, nu har du brug for den egentlige video! Så hvor får du en?

Den nemmeste og billigste løsning er at købe videoindhold fra en af ​​de mange lageroptagelseswebsteder derude. iStock, Shutterstock, Opløse, Coverr og endda Vimeo royaltyfrit er store ressourcer til at erhverve optagelser i professionel kvalitet.

HURTIGTIPS: Et forsigtighedsord, når du gennemser optagelser. Brug det ikke bare for at bruge det. En video skal føjes til dit websteds meddelelse og tjene sin grund til at eksistere. Mange aktievideoer ser alt for generiske og intetsigende ud, og deres karakter i én størrelse passer til alt muligvis ikke noget for at hæve eller skelne dit websted..

For de bedste resultater, ønsker du at ansætte et kreativt agentur eller freelance videograf for at give dig tilpassede skræddersyede optagelser, der virkelig vil engagere brugere med essensen af ​​dit produkt eller brand. Jeg vil foreslå, at du foretager en Google-søgning efter agenturer eller produktionsselskaber i dit nærmeste hovedstadsområde og kigger på deres porteføljer. Få et forslag og et prisoverslag fra et par forskellige til at veje dine muligheder. Dette er dog den dyreste mulighed og kan koste tusinder bare for en enkelt videobakgrund.

Freelancing websteder som oDesk eller Fiverr er muligvis mere budgetvenlige, men det er lidt af en crap shoot på, hvilke produktionsværdier eller ansvar de leverer.

Konklusion

Alle elsker en god video. Vi ser ud til at være sutter for dem – vi spiser uhyggeligt på vores tv, computere, telefoner, tablets, på vores skriveborde, på vores sofaer, i vores biler, overalt og hvor som helst vi kan se dem.

Det er blevet sagt, at 95% af informationen på nettet er skriftsprog. Men med aktuelle fremskrivninger og trends, som de er, kan vores internet-browsing-oplevelse snart blive overvældende bundet til video. Dette giver mening i betragtning af, hvor langt mere effektive videoer er inspirerende end ord.

Selvom ikke enhver virksomhed eller websted har brug for en baggrundsvideo for at formidle sit brand, er der en stor sandsynlighed for, at en vil hjælpe dit. Nu hvor du ved, hvordan du integrerer en på dit websted, opfordrer jeg dig til at se, hvor langt en helt baggrundsvideo vil tage din virksomhed.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map