Hogyan használj háttérvideót a weboldaladon?

A videóháttér az egyik legnépszerűbb webes tervezési trend, amely úgy tűnik, marad is még egy darabig. Külföldi oldalakon már évek óta gyakori elem, csak itthon még drága a videógyártás, illetve a “webes ezermesterek” technikailag nem tudják megoldani a helyes beillesztést, optimalizálást, ezért is foglalom össze, hogyan lehet megcsinálni.

Szóval nagy divat a háttér videó. Én is szeretem, csak azt nem szeretem, amikor 250 megás videókat küldenek, hogy rakjam már fel és természetesen induljon automatikusan. Általában annak, aki készíti a videót valamiért lövése sincs, hogy hogyan/miért/mivel kéne betömöríteni webre, hogy a szerencsétlen ember havi 4G-s forgalmát ne szipkázza le két perc után.

akár 138% -kal is javulhat a konverzió, ha háttérvideó van a kezdőlapon.

Nyilván ez egy hangzatos csúsztatás, amit anyaggyűjtés közben találtam, de amik igazolható tények, hogy sokkal jobban megragadja a figyelmet, magasabbra pozicionál és a weboldalak művészinek, menőnek és modernnek tűnnek tőle.

A választott videónak relevánsnak kell lennie a webhely, vagy a vállalkozás általános célja szempontjából, de ne válassz videót csak azért, mert jól néz ki. Egy jól megválasztott videó nagyon erős marketing és branding eszköz tud lenni, segít az üzenet közvetítésében, melyet kommunikálni próbálsz.

Arra vigyázz, hogy a videó ne versenyezzen a tartalommal. Benne van a nevében, valaminek a háttere. Ha esetleg szöveget használsz rajta, rém idegesítő, ha elvonja a figyelmet a szövegről, ne zavarja a videó feletti tartalom olvashatóságát.

Milyen a jó háttérvideó?

Háttér, tehát nem kisfilm, nem promó videó, csak egy “hangulatot” próbálunk megteremteni vele.

  • Legyen releváns. Például, ha könyvelő vagy, ne rakjál be olyan videót, amely kiemeli a gyönyörű tájat a svájci Alpokban! Nem nyaralási csomagot akarsz eladni.
  • Ne legyen hosszabb, mint 20-30 másodperc. Érdemes egyébként végtelenítettre vágni.
  • Hang? Dehogyis. Ugye a háttérzene és hasonló dolgok már regés régen tiltva vannak, nem véletlenül. Tehát a háttérvideó legyen néma.  Ha van hozzáférésed a forrásvideóhoz, távolítsd el teljes a hangcsatornát, ez segít a fájl méretének megtartásában.
  • Képarány általában szélesvásznú. 16:9, de lehet 2:1 is, vagy még szélesebb, attól függően, hogy milyen a webdesign, hova kerül a videó.
  • A tempója legyen lassú. Ne  kapkodás legyen a háttérben, mert az rendkívül idegesítő.
  • Tiltsd le a videóvezérlőket. Ez csak egy háttér, ne kezeld ugyanolyan módon, mint egy beágyazott videólejátszót az oldalon. Nem kell beletekerni, nem kell megállítani, sem semmi egyebet.

Stock videók

Pontosan olyan mint a stock fotó, csak éppen drágább. Egy jó csomaggal akár már 1 dolláros darabáron is meg lehet szerezni minőségi, nagy-felbontású képeket. A videó viszont drágább történet. Szintén érdemes csomagárban, vagy kredites rendszerben gondolkodni. 720p-s videó esetén a legolcsóbb, amit ki lehet hozni kb 40-45 dollár (10-12 000 Ft) egy videóért. Ha készíttetsz kisfilmet/videót az meg sok tíz (akár száz) ezer forint is lehet. Nézz körül itt az ingyenes stock videók között. Háttérnek alkalmas lehet egyébként egy jobb telefonnal felvett nagy-felbontású videó is.

Mekkorára kell a videót tömöríteni?

Ugye az átlagvállalkozókat nagyon nem szokta érdekelni semminek technikai háttere, legyen csilli-villi oszt jó van, de nem is kell nekik ezzel foglalkozni, a front-endes majd tudja a dörgést. Térjünk vissza egy kicsit a képekre. Évek óta bevett gyakorlat, hogy a weben használni kívánt képeket először optimalizáljuk webre. A videókat is kell hasonló módon, csak ez kissé körülményesebb mint a képek estében.

Ha várni kell a betöltésre, az nem jó. Olyannyira nem jó, hogy Google barátunk jól hátrasorol érte, mondván nem vagy felhasználóbarát. A betöltési sebesség még mindig az egyik legfontosabb faktor a weboldalak találati listában elfoglalt helyének megállapításakor. Egy tömörítetlen videóval szépen tönkre lehet tenni a kezdőlapod SEO-ját.

A videótömörítésnél két méretről beszélünk. Fizikai méret megabyte-ban és a videó felbontásának mérete. A felbontásból adódik a fizikai méret is, minél jobb valaminek a felbontása, annál nagyobb lesz a mérete. A nagy kérdés, hogy mekkora az a legkisebb méret, ami még jól néz ki és nem kerül sok erőforrásba letölteni sem? Mindjárt megmondom, csak előbb vegyük át a standard videó méreteket.

  • SD – 480p – (standard definition)
    Felbontás: 854px × 480px
  • HD – 720p – (high definition)
    Felbontás: 1280px x 720px
  • FULL HD – 1080p – (full high definition)
    Felbontás: 1920px x 1080px
  • UHD (4K)- 2160p – (ultra high definition)
    Felbontás: 4096px × 2160px

A p-k a magasságot jelentik képpontban. A felbontások pedig 16:9-es tehát szélesvásznú képarányhoz tartoznak. Ami a fentiek alatt van az gyengébb mobiltelefonos, ami ezek fölött az pedig már mozis, videojátékos minőség, aminek semmi keresnivalója a weben.

3 választás jöhet szóba a 480p, 720p és a 1080p, attól függően, hogy milyen a videó, milyen a webdesign. Ha teljes szélességű a weboldal és benne a videó háttér is akkor, a 720p, vagy 1080p lesz a jó választás megfelelő tömörítéssel. Ha nem feltűnő a videó kinyújtása 1920-as képernyőkön (nem lesz nagyon elmosott), akkor legyen a kisebbik. Ha nagyobbat választod, akkor pedig tömörítsd be amennyire lehet.

Találtam nem régiben egy progit, ami ingyenes és nagyszerűen tömöríti a videókat akár 95%-os méretcsökkenéssel, látható minőségromlás nélkül! Ami még jobb, lehet vele croppolni is, meg tudod vágni a videó képarányát.

https://handbrake.fr/

Ami fontos, hogy maximum 3-5 megás .mp4 formátumú videókat próbálj csinálni, ami elsőre lehetetlen küldetésnek tűnik, de meg lehet csinálni.

Hogyan kell a háttérvideót beilleszteni?

A háttérként használt videót jobb a saját tárhelyedről HTML5 <video> címkéjét használva beágyazni. Ha valamelyik videómegosztón – YouTube, Vimeo – keresztül ágyazod be, számolni kell azzal, hogy lejátszó scriptek fognak futni az oldalon, esetleg felugranak kapcsolódó videók, reklámok, meg miegymás, és nem fogod tudni minden estben eltüntetni a videóvezérlőket se.

A háttér videó technikailag nem háttér, hanem egy sima beágyazott video, a CSS trükközéstől és abszolút pozicionálásoktól fog úgy kinézni, mintha valaminek a háttere lenne. Nagy kérdés még a rensponsive, hogy hogyan fog ez felvenni majd fluid méretet. Hát nézzük…

Tegyük fel, hogy van egy videó és rajta szöveg, ennek  kell egy befoglaló szülő konténer, amihez igazítjuk a videót, szöveget. A <video> címkében adhatsz meg különböző paramétereket, úgymint: ismétlés, némítás, automatikus lejátszás, fedőkép, videóvezérlők mutatása, és egyebek.

<div id="background-video">
    <video autoplay muted loop poster="/images/video-bg.jpg"><source src="video.mp4" type="video/mp4"></video>
    <div id="background-video-content">
        <h1>Phasellus at vestibulum le</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc ante, consequat vitae odio a, sagittis ultrices dolor. </p>
    </div>
</div>

A befoglaló szülő legyen relative pozicionálású, a benne lévő videó pedig 100% széles, magassága tartsa a képarányt. A szöveges tartalmat fizikailag a videó fölé kell rakni 100% szélesen és magasan, absolute pozicionálással. Ezen belül rendezd a szöveget középre függőlegesen és vízszintesen is, ebben segít a display: flex. Ha túl részletgazdag a videó, vagy nem elég kontrasztos szöveget érdemes lemaszkolni a videó feletti területet, ebben segít az :before pszeudo.

#background-video {
    position: relative;
}

#background-video video {
    width: 100%;
    height: auto;
}

#background-video-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#background-video-content:before {
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 0;
    background: rgba(0, 0, 0, 0.6);
}


#background-video-content * {
    position: relative;
    z-index: 1;
}

Mobilon legyen, vagy ne legyen?

Van pár mobileszköz, ami NEM játssz le háttérvideót. Ez az adathasználat mentésére szolgál, milyen szerencse, mert egykét weboldal már rég leszippantotta volna a netedet, aztán fizetheted a forgalmi díjakat. Gondoskodnod kell valamilyen alternatív fedőképről, az olyan esetekre, ahol nem lehet lejátszani a videót. A bevett gyakorlat az, hogy telefonokon (768px alatt) már elrejtjük az .mp4-et és egy fedőkép jelenik meg helyette.

Záró gondolatok

Használd, de okosan. A weboldalba szakember ágyazza be, és ne feledd, ha nem elég jó a videód, egyszerűen használj inkább háttérképet.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

Szólj Hozzá!

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..