Kuinka upottaa sankarin taustavideo kotisivullesi

Opi käyttämään videotaustaa sivustosi sankariosassa & miksi se voi nostaa huomattavasti yrityksesi muuntokursseja.


Kuinka upottaa sankarin videotausta

Ei ole mikään salaisuus, että videot ovat uskomattoman tehokkaita edistämään yleisön sitoutumista verkkoon. Ihmiset vastaavat ja muistavat visuaalit hämmästyttävän nopeammin kuin silloin, kun sama tieto esitetään sanojen kautta. Aivomme yksinkertaisesti käsittelee kuvia nopeammin – puhumattakaan siitä, että videon katseleminen on hauskaa, jännittävää ja – rehellisesti sanottuna – koukuttavaa. Yleisöllä on tyydyttämätön nälkä videosisällön kuluttamisesta, minkä vuoksi sen ennustetaan olevan kahden vuoden sisällä 80% kaikesta verkkoliikenteestä sidotaan videoon!

Nykyaikaisessa web-suunnittelussa on valtava askel kohti still-kuvien korvaamista dynaamisilla visioilla.

Napsauta Tweet

Ei vain sanat kokevat suurta puhdistusta. Nykyaikaisessa web-suunnittelussa on valtava askel kohti still-kuvien korvaamista dynaamisilla visioilla. Menevät ovat päivät, jolloin staattiset verkkosivut tekstiä ja valokuvia olivat tarpeeksi tyydyttämään käyttäjän sitoutumista. Video on siellä, missä se on – ja nyt on aika kysyä itseltäsi, voidaanko sen puuttumista verkkosivustoltamme edelleen sivuuttaa.

Ehkä tärkein syy siihen, että et ole vielä omaksunut muotoa, johtuu sen havaitusta teknisestä monimutkaisuudesta. Vaikka videoiden saaminen verkkosivustollesi saattaa vaatia ylimääräistä valmistelua ja optimointia, prosessi on tehty viimeisten vuosien aikana tarpeeksi helpoksi erilaisilla laajennuksilla ja HTML5: llä.

Ohje videoiden upottamisen ymmärtämiseen verkkosivustollesi on tässä oppaassa, joka näyttää sinulle, mitä sinun on tiedettävä, jotta saadaan houkutteleva visuaalinen kokemus, jota käyttäjät eivät pian unohda.

Hero-taustavideo

Kun puhumme videoiden upottamisesta verkkosivustollesi, emme puhu vain minkä tahansa tyyppisistä videoista, jotka on sijoitettu mihin tahansa satunnaiseen kohtaan. Tämä artikkeli koskee erityisesti suositun ja tehokkaan verkkosuunnittelun suuntauksen, nimeltään sankari taustavideo.

Tässä on esimerkki:

Esimerkki videotaustan liikkeestä ja seikkailustaTässä on hyvä esimerkki sankarin taustavideon käyttämisestä. Kuten huomaat, video tarjoaa siihen liiketunnelman ja seikkailun polkupyöräkauppa että valokuvia vain ei voitu saavuttaa.

Olemme aiemmin maininneet sankarikuvien käytön käsitteessä ”taiton yläpuolella”Verkkosivusi alue. Henkilön kuva (tai joskus kutsutaan banneriksi) on usein ensimmäinen asia, jonka ihmiset näkevät saapuessaan sivustoosi, jossa sen tärkein sisältö esitetään tiiviisti ja visuaalisella tavalla. Tämä pääosa täyttää tyypillisesti koko näytön leveyden ja korkeuden tyylikkäällä taustakuvalla, jättäen runsaasti avointa tilaa kriittisen toimintakehotuspainikkeen tai linkin ympärille..

Sama käsite pätee täällä, paitsi selvästi nyt, että korvaamme taustakuvan videolla. Tämä voi aluksi tuntua suhteellisen merkityksettömältä muutokselta: Okei, joten meillä oli tapana kuva polkupyörällä ajavasta henkilöstä, mutta nyt meillä on video polkupyörästä toiminnassa ja matkalle ajamiseen – iso huopa, eikö?

Yksinkertaisen liikkeen hetken seuraaminen voi luoda valtavan vaikutuksen siihen, miten käyttäjät havaitsevat tuotemerkkisi ja sitoutuvat siihen.

Napsauta Tweet

No, osoittautuu, että yksinkertaisen hetken katseleminen liikkeellä voi luoda valtavan vaikutuksen siihen, miten käyttäjät havaitsevat tuotemerkkisi ja käyttäytyvät siihen. Videot herättävät tunteita ja toimintaa nopeammin kuin mikään muu väline. Jos tulos on päätavoitteesi, taustavideo voi olla menestyvän verkkosivuston salainen kastike.

Miksi käyttää taustavideota?

On ylivoimaista näyttöä siitä, kuinka tehokkaita videoita voi olla yritykselle. Tässä muutamia houkuttelevia tilastoja jakanut Forbes sen tulisi toimia motivaationa:

  • Hero-taustavideon upottaminen aloitussivullesi voi parantaa muuntokursseja 80%
  • Tuotevideot auttavat vaikuttamaan 90%: iin asiakkaista tekeessään ostopäätöstä
  • 64% asiakkaista ostaa todennäköisemmin tuotteen verkossa katsottuaan siitä videon.
  • Digitaalimarkkinoinnin asiantuntija James McQuivey arvioi tämän Yksi minuutti videosisältöä on 1,8 miljoonan sanan arvoinen.

Esimerkki sankarin taustavideostaHaluatko mieluummin nähdä Kansallispuistot, tai haluaisitko mieluummin kokea niitä?

Joten nyt, kun olemme selvittäneet, miksi videosisältö on niin tärkeää, katsotaanpa vihdoin, kuinka saada nämä kirkkaat asiat esille verkkosivustollasi!

Upota taustavideoita verkkosivustollesi

On totta, että valittavissa on useita tiedostomuotoja, selaimen tuen eri tasoja ja erilaisia ​​tapoja upottaa videoita verkkosivulle -, mutta aion yksinkertaistaa tätä mahdollisimman paljon ja kerron vain tärkeimmät tiedot , askel askeleelta, jotta saavutetaan suurin mahdollinen yhteensopivuus kaikille mahdollisille käyttäjille.

Videoiden itsenäinen ylläpito Hosting-palvelun käyttäminen

Ensimmäinen asia, joka sinun on määritettävä, on missä videotiedostot tosiasiallisesti sijaitsevat: verkkosivustosi omalla palvelimella (toisin sanoen omalla web-tililläsi) tai videon isäntäalustalla, kuten YouTube tai Vimeo.

Jonkin verran itsenäisen videon edut sisältää enemmän vapautta sen upottamiseen, helpompi toteuttaa video koko näytöllä ja enemmän hallintaa videon suojaamisessa kaupallistamisportaalin takana (tätä varten tarvitaan ammattitaitoisen taustakehittäjän palkkaaminen).

Jonkin verran videoalustojen edut sisältää hieman helpomman upotuksen, nopeiden maailmanluokan palvelimien (jotka keventävät kaistanleveyttä omalla palvelimella) käytön, joka on optimoitu erityisesti videotiedostoille, ja laajemman jakamismahdollisuuden.

Yleensä verkkosivustojen yleiskäyttöön tarkoitettujen videoiden suhteen suosittelen videoalustan käyttöä helpoksi palvella sisältöäsi, varsinkin jos sivustosi on jaetun isännöintisuunnitelman mukainen. Taustasankarivideon erityispiirteet vaativat kuitenkin tiettyjä asetuksia, jotka tarjoavat itselleen paremman itsensä isännöinnin. Sinulla voi olla syyt käyttää jompaakumpaa menetelmää, joten annan ohjeet molemmille.

Tapa 1: Itsenäinen isännöinti

Ensinnäkin videon täytyy olla olemassa palvelimellasi. Keskustelemme vähän siitä, millaista videotiedostoa tarvitset, mutta toistaiseksi, kuten kuvien lisääminen, sinun on käytettävä FTP-ohjelma ladataksesi videotiedoston palvelimellesi.

Nyt lisäämme oikean koodin verkkosivullesi taikuuden palvelemiseksi. HTML5 sallii -tunniste, joka onneksi korvaa Flashin videoiden ensisijaisena verkkomuodona. Tässä on mitä tarvitsemme oikean koko näytön taustavideon luomiseksi:

HTML

Valitse koodi

CSS

video # bgvideo {
sijainti: kiinteä;
yläosa: 50%;
vasen: 50%;
min-leveys: 100%;
min-korkeus: 100%;
leveys: auto;
korkeus: auto;
z-indeksi: -100;
-ms-muunnos: translateX (-50%) translateY (-50%);
-moz-muunnos: translateX (-50%) translateY (-50%);
-webkit-muunnos: translateX (-50%) translateY (-50%);
transformaatio: translateX (-50%) translateY (-50%);
tausta: url (paikkamerkki.jpg) ei toista;
taustakoko: kansi;
} Valitse koodi

Täällä tapahtuu melko vähän, joten katsotaanpa, mitä nämä asetukset tarkoittavat.

playsinline

Tämä pitää videon selaimessa ja sisällön rinnalla, mikä on tärkeätä estäessä sitä, että se menee todella koko näytölle, missä video vie koko näytön eikä mitään muuta.

automaattinen toisto

Todennäköisesti haluat sankarin taustavideon toistavan heti, kun sivu on latautunut, ilman että sinun on painettava “toista” -painiketta. Tässä on kuitenkin muutamia ongelmia matkapuhelinkäyttäjille, joista puhun myöhemmin.

vaimea

Ellei videosi sisältää tärkeitä tietoja sen ääniraidassa, on parasta mykistää taustavideo. Ihmisillä on äärimmäinen haluttomuus tavata odottamatonta ääntä surffailtaessa verkossa, joten on parempi sammuttaa ääni kuin sammuttaa käyttäjät.

silmukka

Valinta toistaa videosi toistuvasti olisi tehtävä tapauskohtaisesti. Jos haluat lopullisuuden tunteen, jossa video päättyy selkeään toimintakehotukseen ilman häirintää, olisi järkevää jättää tämä asetus.

juliste

Kuvatiedoston toimittaminen täällä toimii paikkamerkkinä, kunnes videon lataus on valmis ja toisto. Valintasi mukaan, mikä olisi sopivin näyttää, onko kyse sitten videon ensimmäisestä kehyksestä vai jotain logosta tai bannerista.

Meidän CSS asetukset ohjaavat selainta pääasiassa venyttämään videota sivun yli. Huomionarvoista tässä on tausta asettaminen käyttämällä samaa juliste kuva; tämä toimii visuaalisena varana, jos vanhentunut selain ei tunnista omaisuus.

Jos aiot näyttää teksti- tai toimintakehotuspainikkeen taustavideon päällä, voit lisätä ne normaalisti kohtaan div.

Tapa 2: YouTube tai Vimeo

Tämän menetelmän avulla videotiedostot pidetään pois sivustoltasi, missä ne sijaan asuvat erillisillä palvelimilla, jotka ovat erikoistuneet videosisältöön. Olettaen, että olet jo lähettänyt videosi, tarvitset nyt upota linkki. YouTube löytää tämän napsauttamalla videon sivun Jaa-painiketta ja napsauttamalla sitten upota. Vimeon tapauksessa napsautat samalla tavalla ”jaa” ja kopioi sitten ponnahdusikkunassa näkyvä upotuslinkki.

NOPEA VINKKI: Kun käytät “Jaa” -painiketta, YouTube ja Vimeo tarjoavat myös asetuksia, kuten automaattisen toiston, silmukan ja soittimen ohjaimien näyttämisen / piilottamisen. Varmista, että et unohda näitä, jotta voit helposti säätää videosi näyttötapaa. Vimeo saattaa myös vaatia Lisäasetukset jotta se toimisi oikein taustavideona.

Saatat huomata, että nämä upotetut linkit sisältyvät iframe tag, joka käyttäytyy vähän eri tavalla kuin HTML5-elementti. Jotta nämä videot toimisivat koko näytön taustana, meidän on tehtävä pieni säätö merkintöihin. Kiitos Rishabh Aggarwal, siellä on yksinkertainen kiertotapa tämän toteuttamiseksi:

HTML

Valitse koodi

CSS

.videoContainer {
asema: ehdoton;
leveys: 100%;
korkeus: 100%;
alkuun: 0;
vasen: 0;
pohja: 0;
oikea: 0;
näyttö: flex;
taipuisa suunta: sarake;
perustele sisältö: keskusta;
Kohdista tuotteet: keskusta;
}
#sankari {
asema: suhteellinen;
}
iframe {
/* valinnainen */
leveys: 100%;
korkeus: 100%;
} Valitse koodi

YouTube- tai Vimeo-latauksesi pitäisi nyt toimia käytännöllisenä taustavideona sankarisisällön takana.

WordPressin käyttäminen

Jos käytät WordPressiä, on olemassa monenlaisia ​​videotausta-laajennuksia jotka voivat suorittaa yllä olevan tehtävän huolehtimatta koodista. Suurin osa näistä on premium-laajennuksia, jotka joudut ehkä ostamaan.

Vinkkejä ja parhaita käytäntöjä videoiden upottamiseen

Nyt kun videosi on onnistuneesti valmis ja toiminnassa, kaivokaamme hiukan tarkemmin optimoinnin, tiedostokokojen ja sen varmistamiseksi, että sankarisi taustavideo näyttää ja toimii parhaimmillaan..

Tiedostotyypin ymmärtäminen

Olen sanonut aiemmin, että videotiedostotyypeissä on monia vaihtoehtoja, joista suosituimpia on mp4, ogg, ja WebM. Nykyajan selaimet hyväksyvät melkein yleisesti mp4 kuten vallitseva muoto, joten ainakin tämä on tiedostotyyppi, joka sinun on sisällytettävä. Yleensä on kuitenkin hyvä idea varmistaa, että kaikki käyttäjät saavat samanlaisen kokemuksen, vaikka he käyttäisivät vanhentuneita ohjelmistoja; tällöin merkinnät näyttävät samanlaisilta kuin tämä:

Valitse koodi

NOPEA VINKKI: Lisää haluamasi tiedostomuoto viimeksi lähdeluetteloon. Tätä selain lukee viimeksi, ja jos käyttäjän laite tukee sitä, se ladataan.

Toinen tekninen tekijä, joka on harkittava video koodekki käyttää, eli käytännössä miten tiedosto pakataan ja tulkitaan selaimen mediasoittimella. Tärkein koodekki, johon sinun tulisi olla huolissasi, on H.264, mitä useimmat selaimet hyväksyvät ja mitä sivustot, kuten YouTube ja Vimeo, tukevat.

Jos tämä kaikki kuulostaa hämmentävältä žargonilta, älä huoli. Todennäköisesti videosi on jo haluttu MP4 / H.264 muoto. Tämä on yleensä tiedostotyyppi, joka annat ladattaessa osakevideosivustolta. Jos joudut muuntamaan muun tiedostotyypin mp4: ksi, tarvitset siihen lisäohjelmiston. Adobe Premiere Pro on alan standardi videoiden kanssa työskentelemiseen, mutta se ylittää ymmärrettävästi useimpien ihmisten keinot. Onneksi PC: lle ja Macille on ilmainen ohjelma nimeltään HandBrake sen pitäisi suorittaa juuri tarvitsemasi.

Esimerkki sankarin taustavideosta, jolla on ääniSamukawa-jinjan pyhäkkö luo kauniin ja rauhoittavan kokemuksen videolla (ja äänellä – mutta näet miksi se on tässä tapauksessa hyväksyttävää). Ota huomioon videon fiksu integrointi heidän navigointivalikkoonsa.

Videotiedoston optimointi

Ei todennäköisesti ole hyvä idea ottaa videosi nykyisessä muodossa ja ladata se suoraan verkkosivustollesi. Videotiedostot voivat olla suuria – jopa 30 sekunnin leikkeet, jos ne ovat teräväpiirtona tai teräväpiirtona. Muista, että käyttäjien on ladattava nämä tiedostot selaimeen ennen pelaamista, ja 50 megatavun videon lataamisen odottaminen ei tuota suurta käyttökokemusta.

Sinun täytyy säätää videosi päätöslauselma, bittinopeus, ja pituus optimoidaksesi optimaalisen tiedostokoko. Katso tämä kätevä opas videoiden valmistelemista varten nopeasti.

Joten kuinka iso on liian iso? Yleisesti pidetään sitä 5 megatavua on taustavideon enimmäiskoko tiedostokokoineen alle 1 megatavu on ihanne. Tämä voi olla melko hankalaa saavuttaa tasapainon löytämiseksi laadun ja koon välillä. Ensinnäkin, pidä päätöslauselmasi suunnilleen 720p tai vähemmän hyvästä sekoituksesta selkeyttä ja taloudellisuutta. Terävä 4K-video voi näyttää upealta, mutta muista, että suurin osa ihmisistä selaa verkkoa alle 15 ″ -näytöillä, joten lisätty resoluutio olisi vain tarpeeton.

Pituuden suhteen ihanteellinen ajoaika olisi välillä 10–30 sekuntia. Jos se on liian lyhyt, videosi voi tuntua triviaaliselta tai, jos se on silmukka, liian toistuvalta. Liian pitkä video voi menettää käyttäjien huomion ja lisätä tiedostokokoa.

Bittinopeus vaikuttaa merkittävästi tiedoston kokoon, ja se on todennäköisesti se, jonka vietät suurimman osan ponnisteluistasi säätämiseen. Videollesi sopivan numeron löytäminen on prosessi, joka ei kuulu tämän artikkelin piiriin, mutta YouTube ja Vimeo tarjoavat ohjeita tiedostojen optimoinnista tässä ja tässä sen pitäisi auttaa ohjaamaan sinua oikeaan suuntaan.

Äänen poistaminen

Kuten aikaisemmin ehdotettiin, taustavideon mykistäminen on suositeltavampi UX-käytäntö. Jos äänen toistamiseen ei todellakaan ole syytä, voit todella mennä pidemmälle kuin videon mykistämisen ja poistaa ääniraidan kokonaan tiedostosta. Se pienentää tiedoston kokoa huomattavasti poistamalla tarpeettomia tietoja. Tämä vähentää palvelimen kaistanleveyttä ja nopeuttaa lataamista käyttäjille. HandBrake on hyvä vaihtoehto ääniraitojen poistamiseksi tiedostoista helposti.

Automaattinen toisto ja mobiililaitteet

Mainitsin, että matkapuhelimen käyttäjille tarkoitetun automaattisen toistoasetuksen käyttämisessä oli pieni varoitus. Turvatoimenpiteinä ei-toivotun tiedon käytön estämiseksi monet matkapuhelimet kieltäytyvät toistamasta videoita automaattisesti webissä. Tämä tarkoittaa, että Play-painike upotetaan peittokuvana taustavideosi päälle. Vaikka tämä on pieni haitta, todellinen ärsytys on, että tämä peittokuva voi kattaa kaikki sankariosaasi sijoittamasi linkit tai sisällön. Doh!

Näyttää siltä, ​​että iOS: n uusimmat versiot tukevat nyt automaattisen toiston ominaisuutta, mutta monet Android-puhelimet ja muut mobiili-käyttöjärjestelmät ovat edelleen tahraisia. Vaikka monimutkaiset JavaScriptin kiertotavat ja selaimen hakkerit saattavat ratkaista tämän ongelman, niiden luotettavuus on epäjohdonmukaista eikä sitä suositella täysin. Paras ratkaisu kaikkein yhdenmukaisimpaan käyttökokemukseen saattaa olla ehkä käyttää mediakyselyä videon poistamiseksi kokonaan mobiililaitteista ja korvata se paikkamerkkikuvallasi. Aseta tämä CSS-tiedostoosi:

@mediaruutu ja (laitteen suurin leveys: 768px) {
#sankari {
tausta: url (paikkamerkki.jpg) ei toista;
taustakoko: kansi;
}
#bgvideo {
näyttö: ei mitään;
}
} Valitse koodi

Kontrasti teksti & Video

Paras visuaalinen kokemus haluat varmistaa, että teksti on luettavissa ja erottuu sen takana olevasta videosta. Käyttämällä vaaleaa tekstiä tummemmassa videossa tai tummaa tekstiä vaaleammassa videossa varmistaa, että käyttäjät eivät missaa sankariosasi tärkeätä sisältöä tai kehotusta toimintaan.

Yritä käyttää videoita, jotka seuraavat tiettyä värivalikoimaa – vielä paremmin, jos nämä värit vastaavat tuotemerkkisi tyyliopasta. Taustavideo, jossa on liian monta väriä, saattaa näyttää sivun sijainniltasi verkkosivustoltasi tai olla liian häiritsevä sen yläpuolella olevasta tekstistä.

Tehokas tapa muuttaa videosi visuaalista sävyä on käyttää peittokuvia ja suodattimia. Tämä voidaan tehdä muokkausohjelmistojen kuten Adobe Premiere avulla tai jopa nykyaikaisilla selaimilla CSS: n kautta suodattaa omaisuutta. Kokeile väripeittojen, kylläisyyden, epätarkkuuden ja opasiteetin käyttämistä hienosäätääksesi videosi esteettisyyttä niin, että se vastaa brändisi tyyliä ja ei häiritse tekstiä.

Hero-taustaesimerkki kiinnostavalla editoinnilla FreshDesign-toimisto käyttää mielenkiintoista editointia välittääkseen olemuksen ja hahmon, jota on mielenkiintoista katsoa riippumatta siitä, kuinka monta kertaa se silmuaa. Värisuodatin on myös kontrastissa hienosti tekstin ja logon kanssa.

Mistä löytää videoita taustallesi

Olet nyt valmis lisäämään tehokkaan ja täydellisesti optimoidun taustavideon verkkosivustollesi … paitsi, nyt tarvitset todellista videota! Joten mistä saat sellaisen?

Helpoin ja halvin ratkaisu on ostaa videosisältöä yhdestä monista siellä olevista arkistovideosivustoista. iStock, Shutterstock, liueta, Coverr ja jopa Vimeo ilmaiseksi ovat hyviä resursseja ammattimaisen materiaalin hankkimiseksi.

NOPEA VINKKI: Varovaisuus sanaa selatessasi materiaalia. Älä käytä sitä vain käytön vuoksi. Videon on lisättävä sivustosi viestiin ja ansaittava syy olemassaoloon. Monet osakevideot näyttävät liian yleisiltä ja vaaleilta, ja niiden yhden kokoinen luonne ei ehkä tee mitään verkkosivustosi nostamiseksi tai erottamiseksi..

Parhaan tuloksen saamiseksi kannattaa palkata luova toimisto tai freelance-videokuvaaja tarjoamaan sinulle räätälöityjä materiaaleja, jotka houkuttelevat käyttäjiä aidosti tuotteesi tai tuotemerkkisi ytimeen. Ehdotan Google-hakua toimistoille tai tuotantoyrityksille lähimmän pääkaupunkiseudun ympärillä ja katsomaan heidän salkkujaan. Hanki ehdotus ja hintaarvio muutamalta erilaiselta vaihtoehdolta. Tämä on kuitenkin kallein vaihtoehto, ja se voi maksaa tuhansia vain yhdestä videotaustasta.

Freelancer-sivustot kuten oDesk tai Fiverr saattaa olla budjettiystävällisempi, mutta se on vähän hullu ampua siitä, mitä tuotantoarvoja tai vastuuta ne tarjoavat.

johtopäätös

Kaikki rakastavat hyvää videota. Näyttää siltä, ​​että olemme heille tikkaria – kulutamme niitä raivoisasti televisioissamme, tietokoneissa, puhelimissa, tablet-laitteissa, työpöydällämme, sohvillamme, autoissamme, kaikkialla ja missä tahansa voimme katsella niitä.

On sanottu, että 95% Internetin tiedoista on kirjoitettua kieltä. Nykyisten ennusteiden ja suuntausten tapaan, kuten ne ovat, Internet-selauskokemuksemme voi kuitenkin pian liittyä suurelta osin videoihin. Tämä on järkevää, kun otetaan huomioon, kuinka huomattavasti tehokkaammat videot inspiroivat toimintaa kuin sanat.

Vaikka kaikki yritykset tai verkkosivustot eivät tarvitse taustavideota brändinsä välittämiseksi, on suuri todennäköisyys, että yksi auttaa sinua. Nyt kun osaat upottaa yhden verkkosivustollesi, kehotan sinua näkemään kuinka pitkälle sankarin taustavideo vie yrityksesi.

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