Hoe u ‘n helde-agtergrondvideo op u tuisblad kan inbed?

Lees hoe u ‘n video-agtergrond in die helde-afdeling van u webwerf kan gebruik & waarom dit die omskakelingskoerse vir u besigheid aansienlik kan verhoog.


Hoe om 'n heldevideo-agtergrond in te lê

Dit is geen geheim dat video’s ongelooflik effektief is om die betrokkenheid van die gehoor op die web te bevorder nie. Mense reageer op en onthou beeldmateriaal in ‘n ongelooflike hoër tempo as wanneer dieselfde inligting deur woorde aangebied word. Ons breine verwerk eenvoudig prente vinniger – om nie te praat van die ervaring van ‘n video kyk is lekker, opwindend en – eerlik, verslavend nie. Gehore deel ‘n onversadigbare honger na die opneem van video-inhoud, en dit word binne twee jaar voorspel 80% van alle webverkeer sal aan video gekoppel word!

Moderne webontwerp sien groot druk op die vervanging van stilbeelde met meer dinamiese beeldmateriaal.

Klik om te Tweet

Dit is nie net woorde wat suiwer is nie. Moderne webontwerp sien groot druk op die vervanging van stilbeelde met meer dinamiese beeldmateriaal. Verby is die dae toe statiese webblaaie van teks en foto’s voldoende was om gebruikersbetrokkenheid te bevredig. Die video is waar dit is – en dit is nou die tyd om jouself af te vra of die afwesigheid daarvan op jou webwerf steeds geïgnoreer kan word.

Miskien is die hoofrede waarom u nog nie die formaat omhels nie, te danke aan die tegniese kompleksiteite wat dit waargeneem het. Alhoewel daar ekstra voorbereiding en optimalisering nodig is om video’s op u webwerf te kry, is die proses die afgelope paar jaar voldoende vergemaklik met verskillende plugins en HTML5.

Hierdie gids is om u te help om video’s op u webwerf in te bed, en wys u wat u moet weet om ‘n aangrypende visuele ervaring te skep wat gebruikers nie gou sal vergeet nie.

Die “Hero” -agtergrondvideo

As ons praat van die inbedding van video’s op u webwerf, praat ons nie net van enige soort video wat op enige willekeurige plek geplaas word nie. Hierdie artikel handel spesifiek oor die gebruik van ‘n gewilde en effektiewe neiging in webontwerp genaamd die held agtergrond video.

Hier is ‘n voorbeeld:

Voorbeeld van die beweging en avontuur wat 'n video-agtergrond kan bereikHier is ‘n goeie voorbeeld deur ‘n helde-agtergrondvideo te gebruik. Soos u kan sien, bied die video ‘n gevoel van beweging en avontuur hiervoor fietswinkel dat foto’s steeds nie kon bereik nie.

Ons het voorheen die konsep van die gebruik van heldebeelde in die “bokant die vou”-Gedeelte van u webblad. Vir oningewydes is ‘n heldebeeld (of soms banier genoem) dikwels die eerste ding wat mense sien as hulle op jou webwerf aankom, waar die belangrikste inhoud daarvan op ‘n bondige en visueel opvallende manier aangebied word. Hierdie primêre gedeelte vul gewoonlik die hele breedte en hoogte van die skerm met ‘n gladde agtergrondprent, wat baie oop ruimte oorlaat tydens ‘n kritiese oproep-tot-knoppie of skakel.

Dieselfde konsep is hier van toepassing, behalwe as ons nou die agtergrondprent vervang met ‘n video. Dit kan aanvanklik lyk soos ‘n relatiewe onbeduidende verandering: Oké, ons het vroeër ‘n foto van ‘n persoon wat op die fiets ry, maar nou het ons ‘n video van die fiets wat in aksie is en geneem word vir ‘n rit – groot klink, regs?

As u ‘n eenvoudige oomblik in beweging sien, kan dit ‘n geweldige invloed hê op hoe gebruikers u handelsmerk sal raaksien en daarby betrokke wil raak.

Klik om te Tweet

Dit blyk dat die kyk na ‘n eenvoudige oomblik in beweging ‘n geweldige impak kan hê op hoe gebruikers jou handelsmerk sal raaksien en daarby betrokke wil raak. Video’s inspireer emosie en aksie vinniger as enige ander medium. As omskakeling u hoofdoel is, kan ‘n agtergrondvideo die geheime sous van ‘n suksesvolle webwerf wees.

Waarom ‘n agtergrondvideo gebruik??

Daar is oorweldigende bewyse wat illustreer hoe kragtig video’s vir ‘n besigheid kan wees. Hier is ‘n paar aanloklike statistieke gedeel deur Forbes dit moet as motivering dien:

  • As u ‘n held agtergrondvideo op u bestemmingsblad insluit, kan dit die omskakelingskoers met 80% verhoog.
  • Produkvideo’s help om 90% van die kliënte te beïnvloed wanneer hulle ‘n aankoopbesluit neem
  • 64% van die kliënte koop waarskynlik ‘n produk aanlyn nadat hulle ‘n video daaroor gekyk het.
  • Volgens James McQuivey, ‘n digitale bemarkingskundige, is dit die volgende ‘n enkele minuut video-inhoud is 1,8 miljoen woorde werd.

Voorbeeld van 'n helde-agtergrondvideoSou u verkies om die Nasionale parke, of wil jy liewer ervaring hulle?

Nou dat ons vasgestel het hoekom video-inhoud so belangrik is, laat ons uiteindelik sien hoe u hierdie lelike dinge op u webwerf kan kry!

Inbedding van agtergrondvideo’s op u webwerf

Dit is waar dat daar baie lêerformate is om van te kies, verskillende vlakke van blaaierondersteuning en verskillende metodes om video’s op ‘n webblad in te sluit – maar ek gaan dit soveel moontlik maak en u slegs die mees relevante inligting vertel , stap vir stap, om maksimum verenigbaarheid vir alle moontlike gebruikers te bewerkstellig.

Selfhosting Your Video Vs. Met behulp van ‘n gasheerdiens

Die eerste ding wat u moet bepaal, is waar die videolêers eintlik sal woon: op u eie bediener (met ander woorde, u eie webhosting-rekening) of op ‘n video-gasheerplatform soos YouTube of Vimeo.

sommige voordele van self-hosting video sluit ‘n groter vryheid in met die ingebed van die video, makliker implementering om die video op die volledige skerm te maak, en meer beheer oor die beskerming van die video agter ‘n monetiseringsportaal (om ‘n bekwame ontwikkelaar vir die agterkop te huur).

sommige voordele van video-platforms sluit effens makliker inbedding in, die gebruik van vinnige bedieners van wêreldgehalte (wat die bandwydte op u eie bediener verlig) wat spesifiek vir videolêers geoptimaliseer is, en die verspreiding van die vermoë.

Gewoonlik sal ek vir algemene video’s op ‘n webwerf die gemak aanbeveel om ‘n video-platform te gebruik om u inhoud te bedien, veral as u webwerf op ‘n gedeelde gasheerplan is. Die besonderhede van ‘n agtergrondheldvideo vereis egter sekere instellings wat hulself beter bevorder tot self-hosting. U redes mag wees vir die gebruik van een van die twee metodes, so ek sal vir albei instruksies gee.

Metode 1: Selfhosting

Eerstens moet die video op u bediener bestaan. Ons bespreek die tipe videolêer wat u nodig het – maar vir nou, net soos om foto’s by te voeg, moet u FTP-program om u videolêer op u bediener op te laai.

Nou sal ons die regte kode op u webblad plaas om die towerkuns te bedien. HTML5 laat die gebruik van die etiket, wat Flash gelukkig vervang as die internetformaat wat u verkies vir video’s. Hier is wat ons nodig het om ‘n behoorlike agtergrondvideo op die volledige skerm te skep:

HTML

Kies kode

CSS

video # bgvideo {
posisie: vas;
bo: 50%;
links: 50%;
min-breedte: 100%;
min-hoogte: 100%;
breedte: motor;
hoogte: motor;
z-indeks: -100;
-ms-transform: vertaalX (-50%) vertaalY (-50%);
-moz-transform: vertaalX (-50%) vertaalY (-50%);
-webkit-transform: vertaalX (-50%) vertaalY (-50%);
transform: vertaalX (-50%) vertaalY (-50%);
agtergrond: url (placeholder.jpg) herhaal;
agtergrondgrootte: omslag;
} Kies kode

Hier is nogal ‘n bietjie aan die gang, so kom ons kyk na wat hierdie instellings beteken.

playsinline

Dit hou die video binne die blaaier en langs u inhoud, wat belangrik is om te voorkom dat dit waarlik die volle skerm vertoon waar u hele skerm deur die video beset is en niks anders nie.

outomaties af te speel

U sal waarskynlik wil hê dat die helde-agtergrondvideo onmiddellik moet speel sodra die bladsy gelaai is, sonder dat u ‘n “play” -knoppie hoef te druk. Daar is egter ‘n paar probleme hiermee vir mobiele gebruikers, waaroor ek later sal bespreek.

gedempte

Tensy u video noodsaaklike inligting in die klankbaan bevat, is dit die beste om u agtergrondvideo te demp. Mense het ‘n uiterste ontevredenheid om met onverwagte klank begroet te word terwyl hulle op die web is, dus dit is beter om die klank uit te skakel as om u gebruikers af te skakel.

lus

Die keuse om u video herhaal te speel, moet van geval tot geval gemaak word. As u ‘n gevoel van finaliteit wil hê waar die video afgesluit word met ‘n duidelike oproep tot aksie sonder afleiding, dan is dit sinvol om hierdie instelling uit te laat.

plakkaat

As u ‘n beeldlêer hier verskaf, sal dit ‘n plekhouer wees totdat die video klaar gelaai en afgespeel is. Dit is na u oordeel wat die beste sal wees om te vertoon, of dit nou ‘n foto van die eerste raam is, of iets soos ‘n logo of banier..

ons CSS instellings gee die leser in wese opdrag om die video oor die bladsy te strek. Opmerking hier is die agtergrond instelling met behulp van ons dieselfde plakkaat beeld; dit dien as ‘n visuele terugslag in geval ‘n verouderde blaaier nie herken nie eiendom.

As u van plan is om ‘n teks of ‘n oproep tot aksie-knoppie oor die agtergrondvideo te vertoon, kan u dit soos gewoonlik binne die div.

Metode 2: YouTube of Vimeo

Deur hierdie metode te gebruik, sal die videolêers van u webwerf af gehou word, waar hulle eerder op toegewyde bedieners woon wat spesialiseer in video-inhoud. As jy aanvaar dat jy alreeds jou video opgelaai het, sal jy nou die inbed skakel. Vir YouTube word dit gevind deur op die “deel” -knoppie op die video-bladsy te klik en dan op “embed” te klik. Vir Vimeo klik u op “deel” en kopieer dan die inbed-skakel wat in die pop-upvenster verskyn.

VINNIGE WENK: As u die “share” -knoppie gebruik, bied YouTube en Vimeo ook opsies vir instellings soos outospeel, lus, en om spelerskontroles te wys / te verberg. Maak seker dat u dit nie mis nie om aan te pas hoe u video vertoon word. Vimeo kan dit ook benodig addisionele instellings sodat dit behoorlik kan werk as ‘n agtergrondvideo.

U mag opmerk dat hierdie inbed-skakels in ‘n iframe etiket, wat ‘n bietjie anders optree as ons HTML5-element. Om hierdie video’s as agtergronde te laat werk, moet ons ‘n bietjie aanpas met ons opmerking. Danksy ‘n metode deur Rishabh Aggarwal, daar is ‘n eenvoudige oplossing om dit te laat gebeur:

HTML

Kies kode

CSS

.video-houer {
posisie: absoluut;
breedte: 100%;
hoogte: 100%;
bo: 0;
links: 0;
onder: 0;
regs: 0;
vertoon: buig;
buig-rigting: kolom;
regverdig-inhoud: sentrum;
lyn-items: middelpunt;
}
#hero {
posisie: relatief;
}
iframe {
/ * opsioneel * /
breedte: 100%;
hoogte: 100%;
} Kies kode

U YouTube- of Vimeo-oplaai moet nou optree as ‘n funksionele agtergrondvideo agter u heldinhoud.

WordPress gebruik

As u WordPress gebruik, is daar ‘n verskeidenheid video-agtergrondproppe wat bogenoemde taak kan uitvoer sonder om bekommerd te wees oor die kode. Die meeste hiervan is egter premium-inproppe wat u moontlik moet koop.

Wenke en beste praktyke vir die inbedding van video’s

Noudat u video suksesvol op is en in aksie is, laat ons ‘n bietjie verder gaan in die ingewikkelde aspekte van optimalisering, lêergrootte en om te verseker dat u helde-agtergrondvideo op sy beste lyk en funksioneer.

Verstaan ​​lêertipe

Ek het al vantevore gesê dat daar baie opsies in die vorme van videolêers beskikbaar is, waarvan sommige die gewildste is mp4, ogg, en WebM. Moderne blaaiers aanvaar amper universeel mp4 as die heersende formaat, is dit ten minste die lêertipe wat u moet insluit. Dit is egter gewoonlik ‘n goeie idee om te verseker dat alle gebruikers ‘n soortgelyke ervaring ontvang, selfs al is hulle op verouderde sagteware; in welke geval lyk u opmerking dieselfde:

Kies kode

VINNIGE WENK: Voeg u voorkeurlêerformaat laaste in die bronnelys in. Dit is wat die blaaier die laaste sal lees, en as die gebruiker se toestel dit ondersteun, sal dit die een wees wat gelaai word.

Wat nog ‘n tegniese oorweging is video codec om te gebruik, wat basies is hoe die lêer saamgepers word en dan deur die blaaier se mediaspeler geïnterpreteer word. Die belangrikste codec wat u moet bekommerd is H.264, wat die meeste blaaiers aanvaar en watter webwerwe soos YouTube en Vimeo ondersteun.

Moenie bekommerd wees as dit alles soos verwarrende jargon klink nie. Die kans is goed dat u video alreeds na wense is mp4 / H.264 formaat. Dit is gewoonlik die lêertipe wat u kry as u van ‘n voorraadvideo-webwerf aflaai. As u ‘n ander lêertipe moet omskakel na mp4, benodig u addisionele sagteware om dit te doen. Adobe Premiere Pro is die industrie standaard vir die werk met video’s, maar dit is te verstane bo die meeste mense se middele. Gelukkig is daar ‘n gratis program vir PC en Mac wat gebel word handrem dit moet net bereik wat u nodig het.

'N Voorbeeld van 'n helde-agtergrondvideo met klankSamukawa-jinja-heiligdom skep ‘n pragtige en strelende ervaring met video (en klank – maar jy sal sien waarom dit in hierdie geval aanvaarbaar is). Let op die slim integrasie van video met hul navigasiekieslys.

Optimaliseer u videolêer

Dit is waarskynlik nie ‘n goeie idee om u video te neem soos dit tans is en dit direk na u webwerf op te laai nie. Videolêers kan groot wees – selfs knipsels van 30 sekondes as hulle ‘n hoë of ultra definisie het. Onthou dat u gebruikers hierdie lêers op hul blaaier moet aflaai voordat hulle gespeel word, en om te wag vir ‘n video van 50 megabyte om te laai, is nie bevorderlik vir die gebruikerservaring nie..

U moet u video’s aanpas resolusie, bit rate, en lengte om in te pas op ‘n optimale lêergrootte. Kyk hier na gids vir ‘n vinnige oorsig oor hoe om video’s op die internet voor te berei.

So hoe groot is te groot? Dit word algemeen beskou 5 megagrepe is die maksimum grootte vir ‘n agtergrondvideo met lêergroottes minder as 1 megabyte die ideaal te wees. Dit kan moeilik wees om te bereik om ‘n balans tussen kwaliteit en grootte te bewerkstellig. Hou die resolusie vir die begin, ongeveer 720p of minder vir ‘n goeie mengsel van duidelikheid en ekonomie. ‘N Skerp 4K-video lyk dalk pragtig, maar hou in gedagte dat die meeste mense op die skerms van minder as 15 browse op die web blaai, sodat die ekstra resolusie net oorbodig sou wees.

Wat die lengte betref, sou ‘n ideale lopietyd êrens tussen wees 10–30 sekondes. As dit te kort is, kan u video triviaal voel, of as dit lus is, te herhalend. ‘N Te lang video loop die risiko om gebruikers se aandag te verloor en die lêergrootte te verhoog.

Bytempo het ‘n beduidende invloed op lêergrootte, en dit is waarskynlik wat u die meeste van u pogings gaan aanbring. Die vind van die ideale nommer vir u video is ‘n proses wat buite die bestek van hierdie artikel val, maar YouTube en Vimeo bied riglyne oor die optimalisering van lêers hier en hier onderskeidelik, wat kan help om jou in die regte rigting te stuur.

Die klank verwyder

Soos vroeër voorgestel, is u UX-oefening die voorkeur om u agtergrondvideo te demp. As daar regtig geen rede is vir klank om te speel nie, kan u eintlik verder gaan as om die video te demp en die klankbaan heeltemal van die lêer te verwyder. As u dit doen, sal die lêer se grootte aansienlik verminder word deur onnodige data ontslae te raak. Dit beteken minder bandbreedte op u bediener en vinniger laai vir u gebruikers. handrem is ‘n goeie opsie om klankspore maklik uit lêers te verwyder.

Outospeel en mobiele toestelle

Ek het genoem dat daar ‘n klein waarskuwing was om die outospeelinstelling vir mobiele gebruikers te gebruik. As ‘n veiligheidsmaatreël om ongewenste gebruik van data te voorkom, weier baie selfone om video’s op die web outomaties te speel. Dit beteken dat ‘n Play-knoppie as ‘n oorleg bo-op jou agtergrondvideo ingebed is. Alhoewel dit ‘n geringe oorlas is, is die werklike irritasie dat hierdie oorleg potensieel enige skakels of inhoud wat u in u heldeafdeling geplaas het, kan dek. do!

Dit wil voorkom asof die nuutste weergawes van iOS nou die outospeelfunksie ondersteun, maar baie Android-fone en ander mobiele bestuurstelsels is nog steeds spottend. Alhoewel komplekse JavaScript-oplossings en blaaierhacks hierdie probleem kan oplos, is die betroubaarheid daarvan teenstrydig en word dit nie heeltemal aanbeveel nie. Die beste oplossing vir die mees konsekwente gebruikerservaring is miskien die gebruik van ‘n mediavraag om die video heeltemal op mobiele toestelle te verwyder en dit deur u plekhouerbeeld te vervang. Om dit te doen, plaas dit in u CSS-lêer:

@media-skerm en (maksimum breedte van die toestel: 768px) {
#hero {
agtergrond: url (placeholder.jpg) herhaal;
agtergrondgrootte: omslag;
}
#bgvideo {
vertoon: geen;
}
} Kies kode

Kontrasteks & video

Vir die beste visuele ervaring, wil u seker maak dat u teks leesbaar is en uitstaan ​​uit die video daaragter. Deur ligte teks op ‘n donkerder video of donker teks op ‘n ligter video te gebruik, sal u sorg dat u gebruikers nie die belangrike inhoud of oproep tot optrede van u heldeafdeling misloop nie..

Probeer video’s gebruik wat volg op ‘n sekere kleurpalet – selfs beter as hierdie kleure ooreenstem met die stylgids van u handelsmerk. ‘N Agtergrondvideo met te veel kleure lyk miskien nie op u webwerf nie, of kan die teks hierbo te lei.

‘N Doeltreffende metode om die visuele toon van u video te verander, is om oorlegsels en filters toe te pas. Dit kan gedoen word deur bewerkingsagteware soos Adobe Premiere, of selfs op moderne blaaiers deur die CSS filter eiendom. Probeer eksperimenteer met kleuroverlegsels, versadiging, vervaging en ondeursigtigheid om u video se estetika te verfyn, sodat dit ooreenstem met u handelsmerk se styl en nie van die teks aflei nie.

Hero-agtergrondvoorbeeld met aangrypende redigeringDie FreshDesign agentskap gebruik aangrypende redigering om ‘n essensie en karakter oor te dra wat interessant is om na te kyk, ongeag hoeveel keer dit loop. Die kleurfilter kontrasteer ook mooi met die teks en logo.

Waar kan u video’s vind vir u agtergrond?

U is nou gereed om ‘n effektiewe en perfek geoptimaliseerde agtergrondvideo by u webwerf te voeg … behalwe, nou het u die werklike video nodig! So waar kry jy een?

Die maklikste en goedkoopste oplossing is om video-inhoud te koop van een van die vele webwerwe vir voorraadmateriaal daar buite. iStock, Shutter, ontbind, Coverr en selfs Vimeo-royalty-vry is uitstekende hulpbronne vir die verkryging van beeldmateriaal van professionele gehalte.

VINNIGE WENK: ‘N Woord van waarskuwing wanneer u met beeldmateriaal blaai. Moenie dit net gebruik om dit te gebruik nie. ‘N Video moet by u webwerf se boodskap voeg en die rede daarvoor verdien. Baie aandele-video’s lyk te generies en vaal, en hul een-grootte-pas-alles aard kan niks doen om u webwerf te verhef of te onderskei nie..

Vir die beste resultate, wil u ‘n kreatiewe agentskap of vryskutvideograaf huur om u maatmateriaal op maat te maak wat gebruikers werklik sal betrek by die essensie van u produk of handelsmerk. Ek stel voor dat u Google-agentskappe of produksiemaatskappye in u naaste metropolitaanse gebied soek en kyk na hul portefeuljes. Kry ‘n voorstel en prysskatting van ‘n paar verskillende om u opsies te weeg. Alhoewel dit die duurste opsie is, kan dit duisende kos vir slegs ‘n video-agtergrond.

Vryskutwebwerwe soos Upwork of Fiverr is dalk meer begrotingsvriendelik, maar dit is ‘n bietjie van ‘n crap shoot op watter produksiewaarde of aanspreeklikheid hulle bied.

Afsluiting

Almal hou van ‘n goeie video. Dit wil voorkom asof ons lekkers vir hulle is — ons verorber hulle op televisies, rekenaars, telefone, tablette, by ons lessenaars, op ons rusbanke, in ons motors, oral en oral waar ons kan kyk..

Daar word gesê dat 95% van die inligting op die web geskrewe taal is. Met die huidige vooruitskattings en neigings soos hulle is, kan ons internetblaaiervaring egter binnekort oorweldigend aan video gekoppel wees. Dit is sinvol, gesien hoe baie meer effektiewe video’s inspirerend is as woorde.

Alhoewel nie elke besigheid of webwerf ‘n agtergrondvideo benodig om die handelsmerk oor te dra nie, is daar ‘n sterk waarskynlikheid dat een van u kan help. Noudat u weet hoe om een ​​op u webwerf in te sluit, moedig ek u aan om te sien hoe ver ‘n helde-agtergrondvideo u besigheid kan neem.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me