Com incrustar un vídeo de fons de l’heroi a la pàgina d’inici

Apreneu a utilitzar un fons de vídeo a la secció d’herois del vostre lloc & per què pot augmentar molt els tipus de conversió del vostre negoci.


Com incrustar un fons de vídeo d’herois

No és cap secret que els vídeos siguin increïblement eficaços per promoure la participació del públic a la xarxa. Les persones responen i recorden visuals a un ritme increïblement superior que quan es presenta la mateixa informació mitjançant paraules. El nostre cervell simplement processa imatges més ràpidament, sense oblidar que l’experiència de veure un vídeo és divertit, emocionant i, molt francament, addictiu. El públic comparteix una fam insaciable de consumir contingut de vídeo, per la qual cosa es projecta que d’aquí a dos anys 80% del tràfic web es lligarà al vídeo!

El disseny web modern està experimentant una gran empenta cap a la substitució d’imatges fixes per visuals més dinàmics.

Feu clic per tuitejar

No es tracta només de paraules que experimenten una gran purga. El disseny web modern està experimentant una gran empenta cap a la substitució d’imatges fixes per visuals més dinàmics. Ja van passar els dies en què les pàgines web de text i fotografies estàtiques eren suficients per satisfer el compromís dels usuaris. El vídeo és allà on és el moment, i ara toca preguntar-se si es pot seguir ignorant la seva absència al vostre lloc web.

Potser la raó principal per la qual encara has d’abraçar el format es deu a les seves complexitats tècniques. Tot i que pot haver-hi alguna preparació i optimització addicionals necessàries per accedir a vídeos al vostre lloc web, el procés s’ha facilitat en els darrers anys amb diversos complements i HTML5..

Per obtenir ajuda per entendre com incorporar vídeos al vostre lloc web, aquesta guia us mostra aquí el que heu de saber per crear una experiència visual convincent que els usuaris no oblidaran aviat..

El vídeo de fons “Heroi”

Quan parlem d’incrustar vídeos al vostre lloc web, no parlem només de cap tipus de vídeo col·locat en qualsevol lloc aleatori. Aquest article tracta específicament d’utilitzar una tendència popular i eficaç en el disseny web anomenada la vídeo de fons d’herois.

Aquí teniu un exemple:

Exemple de moviment i aventura que pot experimentar un fons de vídeoAquí teniu un bon exemple utilitzant un vídeo de fons d’herois. Com podeu veure, el vídeo proporciona una sensació de moviment i aventura botiga de bicicletes que encara no es podien aconseguir fotografies.

Ja hem esmentat el concepte d’utilitzar imatges d’herois a la secció “per sobre del plecÀrea de la vostra pàgina web. Per als no iniciats, una imatge d’heroi (o de vegades anomenada pancarta) sol ser el primer que la gent veu en arribar al vostre lloc, on el contingut més important es presenta de forma concisa i visualment cridanera. Aquesta secció primària sol omplir l’amplada i l’altura de la pantalla completa amb una imatge de fons elegant, deixant molt espai obert al voltant d’un botó o un enllaç cridats a l’acció..

El mateix concepte s’aplica aquí, tret que òbviament ara estem substituint la imatge de fons per un vídeo. Al principi, això pot semblar un canvi relativament insignificant: D’acord, de manera que solíem fer una foto d’una persona que anava en bicicleta, però ara tenim un vídeo de la bicicleta en acció i que ens està fent per passejar-hi: big whoop, right?

Veure un moment senzill en moviment pot generar un enorme impacte en la percepció i interacció dels usuaris amb la vostra marca.

Feu clic per tuitejar

Doncs bé, resulta que veure un simple moment en moviment pot generar un enorme impacte en la percepció i interacció dels usuaris amb la vostra marca. Els vídeos inspiren emoció i acció més ràpid que qualsevol altre mitjà. Si la conversió és el vostre objectiu principal, un vídeo de fons podria ser la salsa secreta d’un lloc web amb èxit.

Per què fer servir un vídeo de fons?

Hi ha proves aclaparadores que il·lustren el poderós que poden ser els vídeos per a una empresa. A continuació, es mostren algunes estadístiques tímides compartit per Forbes que ha de servir de motivació:

  • Incrustar un vídeo de fons d’heroi a la pàgina de destinació pot augmentar el percentatge de conversions en un 80%
  • Els vídeos de productes ajuden a influir en el 90% dels clients a l’hora de prendre una decisió de compra
  • El 64% dels clients tenen més probabilitats de comprar un producte en línia després de veure un vídeo sobre ell.
  • James McQuivey, expert en màrqueting digital, ho estima un minut de contingut de vídeo val 1,8 milions de paraules.

Exemple de vídeo de fons d’heroiPreferiria veure el Parcs nacionals, o preferiria? experiència ells?

Així que ara que ja hem establert per què el contingut de vídeo és tan important, anem a veure com s’aconsegueixen aquestes coses malaurades al vostre lloc web!

Incrustar vídeos de fons al vostre lloc web

És cert que hi ha molts formats d’arxiu per triar, diferents nivells d’assistència del navegador i diversos mètodes per incrustar vídeos a una pàgina web, però vaig a simplificar-ho el màxim possible i només us explicaré la informació més pertinent. , pas a pas, per aconseguir la màxima compatibilitat per a tots els usuaris possibles.

Allotjament independent del vostre vídeo. Ús d’un servei d’allotjament

El primer que heu de determinar és on residiran realment els fitxers de vídeo: al servidor propi del vostre lloc web (és a dir, al vostre compte d’allotjament web) o a una plataforma d’allotjament de vídeos com YouTube o Vimeo.

Alguns avantatges de fer vídeo d’allotjament propi incloure tenir una major llibertat amb la integració, una implementació més senzilla per fer el vídeo a pantalla completa i un major control de la protecció del vídeo darrere d’un portal de monetització (es requereix la contractació d’un desenvolupador especialitzat en fons)..

Alguns avantatges de les plataformes de vídeo incloure incrustacions lleugerament més fàcils, ús de servidors ràpids de classe mundial (que augmenten l’amplada de banda al vostre propi servidor) optimitzats específicament per a fitxers de vídeo i una capacitat de compartició més estesa.

Habitualment, per a vídeos d’ús general en un lloc web, li recomanaria la facilitat d’utilitzar una plataforma de vídeo per servir el vostre contingut, sobretot si el vostre lloc es troba en un pla d’allotjament compartit. Tot i això, les especificitats d’un vídeo d’heroi de fons requereixen determinades configuracions que es presten millor a l’allotjament propi. És possible que tingueu les vostres raons per utilitzar qualsevol dels dos mètodes, així que us proporcionaré instruccions per a tots dos.

Mètode 1: Allotjament autònom

Primer, el vídeo ha d’existir al vostre servidor. Discutirem quin tipus de fitxer de vídeo necessiteu una mica; però, de moment, tal com afegir imatges, haureu d’utilitzar un Programa FTP per penjar el fitxer de vídeo al servidor.

Ara inserirem el codi correcte a la vostra pàgina web per servir la màgia. HTML5 permet l’ús del fitxer tag, que afortunadament substitueix Flash com el format web preferit per als vídeos. A continuació, detallem el que necessitem per crear un vídeo de fons de pantalla completa adequat:

HTML

Selecciona el codi

CSS

vídeo # bgvideo {
posició: fix;
superior: 50%;
esquerra: 50%;
amplada mínima: 100%;
alçada mínima: 100%;
amplada: auto;
alçada: auto;
índex z: -100;
-ms-transform: translateX (-50%) translateY (-50%);
-moz-transform: translateX (-50%) translateY (-50%);
-webkit-transform: translateX (-50%) translateY (-50%);
transform: translateX (-50%) translateY (-50%);
fons: url (placeholder.jpg) no-repetir;
background-size: cover;
} Selecciona el codi

Aquí hi ha un munt de coses, així que anem a veure què significa aquesta configuració.

playinline

Això manté el vídeo dins del navegador i al costat del contingut, cosa que és important per evitar que passi realment a pantalla completa on tota la pantalla està ocupada pel vídeo i res més.

reproducció automàtica

El més probable és que voldreu que el vídeo de fons d’heroi es reprodueixi immediatament un cop s’hagi carregat la pàgina, sense necessitat de prémer un botó de reproducció. Hi ha alguns problemes amb això per als usuaris de mòbils, però, del que us parlaré més endavant.

silenciat

A menys que el vostre vídeo inclogui informació essencial a la pista d’àudio, el millor és silenciar el vostre vídeo de fons. La gent té un malestar extrem per haver rebut un so inesperat mentre navega pel web, de manera que és millor desactivar el so que apagar els usuaris.

bucle

L’elecció de reproduir el vostre vídeo en repetició s’hauria de fer cas per cas. Si voleu una sensació de finalitat on el vídeo finalitzi amb una clara crida a l’acció sense distracció, tindria sentit deixar aquesta opció.

cartell

Subministrant aquí un fitxer d’imatge actuarà com a marcador de posició fins que el vídeo acabi de carregar-se i es reprodueixi. El que seria més adequat és mostrar a la vostra discreció, ja sigui un fotograma del primer fotograma del vídeo o alguna cosa així com un logotip o una pancarta.

El nostre CSS la configuració indica essencialment el navegador per estirar el vídeo per la pàgina. A destacar aquí el fons configuració usant el mateix cartell imatge; això funciona com a disminució visual en cas que un navegador antiguitat no el reconegui propietat.

Si teniu intenció de mostrar un text o un botó de trucada a l’acció sobre el vídeo de fons, podeu afegir-los de forma habitual al menú div.

Mètode 2: YouTube o Vimeo

Utilitzant aquest mètode mantindreu els fitxers de vídeo fora del vostre lloc, on viuen en servidors dedicats especialitzats en contingut de vídeo. Si suposem que ja heu carregat el vostre vídeo, ara ho tindreu enllaç integrat. Per a YouTube, es troba fent clic al botó “compartir” a la pàgina del vídeo i després fent clic a “incrustar”. Per a Vimeo, fareu clic de manera similar a “compartir” i copieu l’enllaç incrustat que es mostra a la finestra emergent.

CONSELL RÀPID: Quan s’utilitza el botó “compartir”, YouTube i Vimeo també proporcionaran opcions per a configuracions com ara la reproducció automàtica, el bucle i la mostra / ocultació dels controls del reproductor. Assegureu-vos que no us perdin aquestes opcions per ajustar fàcilment la visualització del vostre vídeo. Vimeo també pot requerir configuració addicional perquè funcioni correctament com a vídeo de fons.

Podeu notar que aquests enllaços incrustats es troben en un iframe etiqueta, que es comporta una mica diferent que el nostre element HTML5. Perquè aquests vídeos funcionin com a fons de pantalla completa, haurem de fer una mica d’ajust amb el nostre marc. Gràcies a un mètode per Rishabh Aggarwal, Hi ha una solució senzilla per fer-ho realitat:

HTML

Selecciona el codi

CSS

.videoContainer {
posició: absoluta;
amplada: 100%;
alçada: 100%;
superior: 0;
esquerra: 0;
inferior: 0;
dreta: 0;
visualització: flexió;
flex-direction: column;
justificar-contingut: centre;
align-items: centre;
}
#hero {
posició: relatiu;
}
iframe {
/ * opcional * /
amplada: 100%;
alçada: 100%;
} Selecciona el codi

La càrrega de YouTube o Vimeo ara hauria de comportar-se com un vídeo de fons del contingut del contingut d’herois.

Utilitzant WordPress

Si feu servir WordPress, hi ha un varietat de complements de fons de vídeo que pot realitzar la tasca anterior sense preocupar-te pel codi. Tanmateix, la majoria són plugins premium que haureu de comprar.

Consells i bones pràctiques per incrustar vídeos

Ara que el vostre vídeo funciona i funciona amb èxit, anem a aprofundir una mica més en les complexitats d’optimització, mida de fitxer i garantint que el vostre vídeo d’heroi de fons sembli i funcioni al millor..

Comprensió del tipus de fitxer

He dit abans que hi ha moltes opcions disponibles en els tipus de fitxers de vídeo, algunes de les més populars mp4, ogg, i webm. Els navegadors actuals gairebé universalment accepten mp4 com a format prevalent, és almenys el tipus de fitxer que haureu d’incloure. No obstant això, sol ser una bona idea assegurar-se que tots els usuaris rebin una experiència similar, encara que estiguin en programes obsolets; en aquest cas, el vostre marcatge serà similar a aquest:

Selecciona el codi

CONSELL RÀPID: Inseriu el darrer format de fitxer preferit a la llista de fonts. Això és el que llegirà el navegador i, si el dispositiu de l’usuari el suporta, serà el que es carregarà.

Una altra tècnica a considerar és què còdec de vídeo per utilitzar, que és bàsicament com es comprimeix el fitxer i després és interpretat pel reproductor multimèdia del navegador. El còdec principal que us hauria de preocupar és H.264, que és el que accepten la majoria de navegadors i quins llocs com ara YouTube i Vimeo admeten.

Si tot això sona com un argot confús, no us preocupeu. És probable que el vostre vídeo ja sigui a la desitjada mp4 / H.264 format. Aquest sol ser el tipus de fitxer que rebeu quan baixeu d’un lloc de vídeo en stock. Si necessiteu convertir un tipus de fitxer diferent a mp4, haureu de necessitar un programa addicional per fer-ho. Adobe Premiere Pro és l’estàndard de la indústria per treballar amb vídeos, però això és comprensible als mitjans de la majoria de la gent. Per sort, hi ha un programa gratuït per a PC i Mac Fre de mà que ha de complir tot el que necessiti.

Un exemple de vídeo de fons d’heroi amb àudioSantuari Samukawa-jinja crea una experiència agradable i relaxant amb vídeo (i àudio), però veureu per què en aquest cas és acceptable). Preneu nota de la intel·ligent integració del vídeo amb el seu menú de navegació.

Optimització del vostre fitxer de vídeo

Probablement no és una bona idea agafar el vídeo, tal com està actualment i penjar-lo directament al lloc web. Els fitxers de vídeo poden ser grans, fins i tot de 30 segons, si estan en alta definició o fins i tot. Recordeu que els vostres usuaris han de descarregar aquests fitxers al navegador abans de reproduir-los, i esperar que es carregui un vídeo de 50 megabytes no és propici per a una gran experiència d’usuari..

Haureu de modificar els vídeos resolució, velocitat de bits, i llargada per tal de perfilar una mida òptima del fitxer. Consulteu-ho bé guia per obtenir una cerca ràpida sobre com preparar vídeos per a la web.

Llavors, què gran és massa gran? Generalment es considera que 5 megabytes és la mida màxima per a un vídeo de fons, amb mides de fitxer menys d’1 megabyte sent l’ideal. Això pot ser bastant complicat d’aconseguir per tal d’equilibrar qualitat i mida. Per començar, manteniu la resolució al voltant 720p o menys per una bona barreja de claredat i economia. Un vídeo 4K brusc podria semblar magnífic, però tingueu en compte que la majoria de la gent navega per la web a pantalles inferiors a 15 ″, de manera que la resolució afegida seria superflua.

En termes de longitud, hi ha un període de temps ideal ideal 10-30 segons. Si és curt, el vostre vídeo pot sentir-se trivial o, si és descuidat, massa repetitiu. Un vídeo massa llarg suposa el risc de perdre l’atenció dels usuaris i augmentar la mida del fitxer.

La velocitat de bits té un impacte significatiu en la mida del fitxer i és probablement el que dedicareu la major part dels vostres esforços a l’hora de modificar. Trobar el número ideal per al vostre vídeo és un procés que està fora de l’abast d’aquest article, però YouTube i Vimeo proporcionen directrius sobre l’optimització d’arxius. aquí i aquí respectivament, això us hauria d’ajudar a dirigir-vos en la direcció correcta.

Eliminació de l’àudio

Tal i com heu suggerit anteriorment, silenciar el vostre vídeo de fons és la pràctica preferida d’UX. Si realment no hi ha cap motiu de reproducció de so, realment podeu anar més enllà que silenciar el vídeo i treure la pista d’àudio del fitxer. Si ho feu, reduireu considerablement la mida del fitxer eliminant les dades innecessàries. Això es tradueix en menys amplada de banda al vostre servidor i una càrrega més ràpida per als usuaris. Fre de mà és una bona opció per eliminar fàcilment les pistes d’àudio dels fitxers.

Reproducció automàtica i dispositius mòbils

Vaig esmentar que hi havia una petita advertència amb l’ús de la configuració de reproducció automàtica per als usuaris mòbils. Com a precaució de seguretat per evitar un ús no desitjat de dades, molts telèfons mòbils es negaran a reproduir vídeos automàticament al web. Això significa que un botó de reproducció s’incrustarà com a superposició a la part superior del vídeo de fons. Tot i que això és una molèstia menor, la veritable irritació és que aquesta superposició pot cobrir potencialment qualsevol enllaç o contingut que hàgiu col·locat a la secció d’herois. Doh!

Sembla que les darreres versions d’iOS admeten ara la funció de reproducció automàtica, però molts telèfons Android i altres sistemes operatius mòbils continuen sent manques. Tot i que les solucions complexes de JavaScript i els hacks del navegador poden solucionar aquest problema, la seva fiabilitat és inconsistent i no es recomana del tot. La millor solució per a l’experiència de l’usuari més consistent potser és utilitzar una consulta multimèdia per eliminar el vídeo completament en dispositius mòbils i reemplaçar-lo per la vostra imatge de marcador de posició. Per fer-ho, introduïu-lo al fitxer CSS:

Pantalla @media i (amplada màxima del dispositiu: 768px) {
#hero {
fons: url (placeholder.jpg) no-repetir;
background-size: cover;
}
#bgvideo {
visualització: cap;
}
} Selecciona el codi

Text de contrast & Vídeo

Per obtenir la millor experiència visual, voleu assegurar-vos que el vostre text sigui llegible i que quedi fora del vídeo que hi ha al darrere. Si feu servir un text clar en un vídeo més fosc o un text fosc en un vídeo més clar, us assegureu que els vostres usuaris no perdin el contingut important ni criden a l’acció de la secció d’herois..

Proveu d’utilitzar vídeos que segueixin una certa paleta de colors, encara millor si aquests colors coincideixen amb la guia d’estil de la vostra marca. Un vídeo de fons amb massa colors pot semblar fora de lloc del lloc web o pot distreure massa el text que hi ha a sobre.

Un mètode eficaç per alterar el to visual del vostre vídeo és aplicar sobreposicions i filtres. Això es pot fer mitjançant programes d’edició com Adobe Premiere, o fins i tot en navegadors moderns mitjançant CSS filtre propietat. Proveu d’experimentar amb superposicions de color, saturació, difuminat i opacitat per ajustar l’estètica del vostre vídeo perquè coincideixi amb l’estil de la vostra marca i no distregui del text..

Exemple de fons d’heroi amb edició atractivaEl Agència FreshDesign utilitza l’edició atractiva per transmetre una essència i un personatge que és interessant de mirar, per molt que es produeixi una vista. El filtre de colors també contrasta molt bé amb el text i el logotip.

On trobar vídeos per al vostre fons

Ja esteu preparat per afegir un vídeo de fons eficaç i perfectament optimitzat al vostre lloc web … excepte, ara necessitareu el vídeo real. Així, on en treus??

La solució més fàcil i menys costosa és adquirir contingut de vídeo des d’un dels molts llocs web de metratge en format existent. iStock, Shutterstock, Dissoldre, Coverr i fins i tot Royalty free royalty for Vimeo són grans recursos per adquirir material de qualitat professional.

CONSELL RÀPID: Una paraula de precaució quan navegueu en material de stock. No l’utilitzeu només pel bé d’utilitzar-lo. Un vídeo ha d’afegir-se al missatge del vostre lloc i guanyar-ne la raó d’existir. Molts vídeos d’imatge semblen genèrics i poc blandos i és possible que la seva naturalesa d’un format únic no faci res per elevar o distingir el vostre lloc web…

Per obtenir els millors resultats, voldreu contractar una agència creativa o un fotògraf autònom per oferir-vos imatges realitzades a mida que realment comprometin els usuaris amb l’essència del vostre producte o marca. Suggeriria fer una cerca a Google per a agències o empreses de producció de l’àrea metropolitana més propera i fer una ullada a les seves carteres. Obteniu una proposta i una estimació de preus d’altres quants per pesar les vostres opcions. Aquesta serà l’opció més cara però que pot costar milers només per un sol fons de vídeo.

Llocs d’autònom com Treball superior o Fiverr pot ser més econòmic, però és una mica merdós els valors o la responsabilitat que proporcionen.

Conclusió

Tothom adora un bon vídeo. Semblem que els fan de xafarders: els consumim de manera ràpida als nostres televisors, ordinadors, telèfons, tauletes, a les nostres escriptori, als nostres sofàs, als nostres cotxes, a qualsevol lloc i on els puguem veure.

Es diu que el 95% de la informació de la xarxa és d’idioma escrit. Tanmateix, amb les projeccions i les tendències actuals tal com són, la nostra experiència de navegació per Internet pot estar molt aviat vinculada al vídeo. Això té sentit, ja que els vídeos són molt més eficaços que inspiren l’acció que les paraules.

Tot i que no totes les empreses o llocs web necessiten un vídeo de fons per transmetre la seva marca, hi ha una forta probabilitat que un pugui ajudar-lo. Ara que ja sabeu com incorporar-ne un al vostre lloc web, us animo a veure fins a quin punt un vídeo de fons d’heroi arribarà al vostre negoci.

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