Sign in Subscribe

Crearea și integrarea bannerelor video MP4

Last updated on 

Utilizarea bannerelor video poate crește semnificativ impactul vizual al magazinului. Pentru a asigura o viteză de încărcare optimă și o afișare corectă pe toate dispozitivele, urmați pașii de mai jos.

1. Optimizarea fișierelor video

Înainte de a încărca videoclipurile pe site, acestea trebuie optimizate pentru a reduce dimensiunea fișierului fără a pierde calitatea vizuală. Puteți folosi instrumente precum Canva, Adobe Express sau alte programe de editare video.

Dimensiuni recomandate:

  • Versiunea Desktop: Lățime de 1920 px cu o înălțime de minim 600 px.
  • Versiunea Mobil: Dimensiuni de 480 x 600 px.
Sfat: Încercați să păstrați durata videoclipului scurtă (5-10 secunde) și dimensiunea fișierului sub 2-3 MB pentru a nu încetini site-ul.

2. Încărcarea fișierelor

După ce ați exportat cele două versiuni (desktop și mobil) în format .mp4:

  1. Încărcați fișierele local pe serverul magazinului folosind Managerul de fișiere din editarea unei pagini de exemplu
  2. Copiați URL-ul complet al fiecărui fișier (calea către fișier).

3. Configurarea codului și a Casetei Text

Pentru a afișa videoclipul în funcție de dispozitivul utilizat de client, vom folosi o Casetă text în care vom introduce un cod HTML.

  1. Creați o Casetă text nouă în panoul de administrare.
  2. Accesați vizualizarea de cod (Sursă/HTML) a casetei.
  3. Introduceți codul de mai jos, înlocuind link-urile demonstrative cu link-urile fișierelor dumneavoastră:

HTML

<style>
  .banner-video-dskt { display: block; width: 100%; height: auto; }
  .banner-video-mbl { display: none; width: 100%; height: auto; }

  @media (max-width: 767px) {
    .banner-video-dskt { display: none; }
    .banner-video-mbl { display: block; }
  }
</style>

<video class="banner-video-dskt" autoplay muted loop playsinline>
  <source src="CALE_CATRE_VIDEO_DESKTOP.mp4" type="video/mp4">
  Browserul tau nu suporta formatul video.
</video>

<video class="banner-video-mbl" autoplay muted loop playsinline>
  <source src="CALE_CATRE_VIDEO_MOBIL.mp4" type="video/mp4">
  Browserul tau nu suporta formatul video.
</video>

4. Plasarea în Layout

După ce ați salvat Caseta text cu codul configurat:

  1. Navigați la secțiunea Design > Layout.
  2. Identificați layoutul în care doriți să apară bannerul (de exemplu, Homepage în zona centrală după caseta Conținut pagină).
  3. Adăugați caseta text creată în acea poziție.
  4. Salvați layout-ul și verificați afișarea atât pe desktop, cât și pe mobil.

Notă importantă: Parametrii autoplay muted loop playsinline sunt esențiali. Majoritatea browserelor moderne nu permit redarea automată a videoclipurilor dacă acestea nu au sunetul oprit implicit (muted).