Video posnetki na spletni trgovini

Izboljšajte uporabniško izkušnjo in povečajte prodajo z video posnetki na spletni trgovini

V današnjem digitalnem svetu, kjer se trženje premika k bolj interaktivnim in vizualnim pristopom, so video posnetki postali nepogrešljiv del vsake uspešne spletne trgovine. V tej objavi bomo raziskali, zakaj bi morali vključiti video posnetke na vašo spletno trgovino, razmislili o najboljših praksah za gostovanje teh video posnetkov ter vam ponudili praktične smernice za njihovo vgradnjo.

Zakaj dodati video posnetke na spletno trgovino?

Vključitev video posnetkov na vašo spletno trgovino prinaša številne prednosti, ki lahko bistveno izboljšajo vašo poslovno uspešnost:

• Boljša uporabniška izkušnja: Video posnetki omogočajo potencialnim strankam boljši vpogled v izdelke ali storitve, kar lahko poveča zaupanje in zmanjša stopnjo vračanja izdelkov.
• Povečana konverzija: Raziskave kažejo, da so stranke bolj nagnjene k nakupu izdelkov, za katere so videle video posnetke. Video lahko podrobneje prikaže funkcije in uporabo izdelka, kar pomaga pri odločitvi za nakup.
• SEO prednosti: Video vsebine lahko izboljšajo vaše pozicije v iskalnikih, še posebej če so pravilno optimizirane s ključnimi besedami in pravilnimi meta opisi.

Kje gostovati video posnetke

Pri odločitvi, kje gostiti video posnetke za vašo spletno trgovino, je pomembno razmisliti o prednostih vsake možnosti:

• Lokalni Strežnik: Neposredno gostovanje video posnetkov na vašem strežniku omogoča večji nadzor nad vsebino in hitrostjo nalaganja. To je lahko dobra možnost, če želite ohraniti vsebino znotraj vaše domene in izboljšati hitrost nalaganja strani. Slabost je, da je lahko predvajanje posnetkov slabše optimizirano za različne naprave in da veliki video posnetki ali porabijo kar nekaj strežniških resursev.
• Platforme YouTube/Vimeo: Uporaba platform kot sta YouTube ali Vimeo omogoča širši doseg in večjo izpostavljenost vaših video vsebin. Ti servisi tudi samodejno optimizirajo video posnetke za različne naprave in ponujajo analitične podatke, ki vam pomagajo razumeti, kako se vaše video vsebine obnašajo.

Kako vgraditi video posnetek na spletno stran?

Zdaj, ko se odločite, kje boste gostili svoje video posnetke, je čas, da jih vgradite na vašo spletno stran. Tu je primer preprostega postopka za vgradnjo video posnetka:

1. Pridobite Vdelano Kodo: Na platformi za gostovanje (npr. YouTube) poiščite svoj video in izberite možnost za vdelavo (embed). Kopirajte generirano iframe kodo.
2. Vstavite Kodo v HTML Stran: V urejevalniku spletnih strani ali CMS (npr. Magento) odprite stran, kjer želite vstaviti video. Preklopite na način urejanja HTML kode in prilepite iframe kodo na želeno mesto.
3. Prilagodite nastavitve: Po potrebi prilagodite velikost in druge nastavitve vdelanega videa v skladu s priporočili platforme.

Primer vgradnje posnetkov na platformi Magento 1.9 / OpenMage

Primer vgradnje posnetkov na platformi Magento 2

Napreden Primer: Uporaba YouTube API-ja za dinamično vsebino

Za naprednejše uporabnike, ki želijo integrirati video vsebine na bolj prilagojen način, je uporaba YouTube API-ja odlična možnost. To omogoča dinamično nalaganje video posnetkov na podlagi določenih pogojev ali uporabniških dejanj.

Kako vgraditi responsive YouTube video na spletno stran?

Za vgradnjo responsive YouTube videa, ki se prilagaja glede na vsebino, lahko uporabite naslednje korake:

1. Pridobite vdelano kodo: Pojdite na YouTube in poiščite želeni video. Kliknite na možnost za vdelavo (embed) pod video posnetkom in kopirajte iframe kodo. V kolikor boste imeli na strani artikla prikaz videa na isti lokaciji je najbolje narediti nov atribut artikla v katerega kopirate youtube povezavo. Če imamo svoj atribut lahko potem na trgovini naredimo poljuben prikaz in dodatne prilagoditve.
2. Dodajte razmerje širine in višine: V urejevalniku HTML dodajte razmerje širine (width) in višine (height) v iframe kodo. Namesto statičnih dimenzij lahko uporabite odstotke, na primer width="100%", da se video prilagodi širini vsebnika.
3. ali Uporabite CSS za dodatno prilagodljivost: Za dodatno prilagodljivost lahko uporabite CSS, da nastavite maksimalno širino videa ali dodate druge oblikovalske prilagoditve, ki bodo ohranile videz vaše spletne strani skladnega.

/* Wrapper za video */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* Razmerje širine in višine (16:9) */
height: 0;
overflow: hidden;
max-width: 100%; /* Lahko prilagodite maksimalno širino glede na vaše potrebe */
margin-bottom: 20px; /* Dodate lahko tudi dodatni prostor pod videom */
}
/* Vdelan iframe za video */
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Kako deluje ta CSS?

1. .video-wrapper: Ta razred določa ovojnico (wrapper) za vaš vdelani video. padding-bottom: 56.25%; določa razmerje širine in višine (16:9 razmerje), ki je optimalno za YouTube videe. height: 0; in overflow: hidden; skrijeta dejansko višino ovojnice in preprečita, da bi se vsebina prelivala čez meje. max-width: 100%; poskrbi, da se ovojnica prilagodi širini svojega starša (na primer, če je vsebnik strani širši, se ovojnica raztegne do maksimalne širine, ki ste jo določili).
2. .video-wrapper iframe: Ta del CSS določa, kako se vdelani iframe video posnetka prilagodi ovojnici. position: absolute; top: 0; left: 0; width: 100%; height: 100%; ga postavi v levi zgornji kot ovojnice in raztegne na polno širino in višino ovojnice, kar zagotavlja, da se video posnetek pravilno prilagodi razmerju širine in višine.

Kako uporabiti to kodo?

1. Dodajte div z razredom .video-wrapper okoli vaše iframe kode, ki ste jo pridobili.
2. Prilagodite padding-bottom v .video-wrapper po potrebi, če želite drugo razmerje širine in višine (na primer, 4:3 bi bil padding-bottom: 75%;).
3. CSS pravila vključite v svojo obstoječo CSS datoteko teme (potreben ftp dostop).

Ta pristop bo zagotovil, da se vdelani YouTube video pravilno prikaže in prilagodi glede na širino naprave ali brskalnika, kar izboljšuje uporabniško izkušnjo vaše spletne trgovine.