019 Postavljanje YouTube videa u Web tekstove i Novosti

BizzyBeeShop ima mogućnost da trgovac na svojoj web trgovini ima neograničen broj tekstualnih stranica, koje mi zovemo Web tekstovi i te neograničen broj Novosti. Web tekstovi i Novosti predstavljaju sadržaj koji se piše u tzv. Rich-text formatu. Rich-Text format znači da takav sadržaj može sadržavati:

  • Formatirani tekst
  • Slike
  • Video zapise
  • ... Druge vrste sadržaja.

Postavljanje Video zapisa najlakše se radi s YouTube videima. Ako imate video koji nije već na YouTube platformi, predlažemo vam da ga postavite na YouTube.

Postavljanje videa

Pokazati ćemo kako se postavlja YouTube video u Novosti. Ista je procedura i za Web tekstove.

Otvorite Novost u Green Panelu koju želite napisati. Pronađite mjesto gdje želite ubaciti YouTube video zapis, najbolje je u posebnoj liniji teksta.

Pošto se ubacivanje YouTube videa ne može vršiti ubacivanjem u sami formatirani tekst, potrebno je prebaciti se na pregled u HTML kodu.

Na isti način, u HTML kodu pronađite mjesto gdje se treba ubaciti video zapis.

 

Sada se prebacite na YouTube. Pronađite video na YouTube portalu. Slijedite sljedeći proces:

  • Ispod YouTube videa kliknite link SHARE
  • Na "Share" dijalogu, odaberite opciju "Embed"
  • S desne strane vidjeti ćete kod koji je YouTube portal generirao i koji će trebati ubaciti u HTML kod Novosti
  • Najjednostavnije odaberite link COPY u donjem desnom kutu
  • Kopirani kod zalijepite (Paste) u Novost koju ste ranije otvorili
  • Snimite novost i osvježite (Refresh) stranicu na web trgovini. Video mora biti tamo spreman za PLAY.

Primjer koda koji je generirao YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/i9AxgjiRJnA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

Responzivna širina videa

Kada ste ubacili video na Novost, vjerojatno ćete primijetiti da se video raširio po širini i visini za određenu, fiksnu duljinu. Tako je YouTube generirao kod i takvog smo ga ubacili u Novost.

YouTube kod u sebi sadrži atribute width i height, koji točno definiraju širinu i visinu. Nažalost, takav kod neće prikazati video zapis lijepo na svim ekranima, tj. različitim uređajima, od desktop računala, do mobitela.

Idealno bi bilo kada bi se video uvijek raširio, toliko koliko je cijela širina web stranice, na uređaju na kojem gledamo stranicu. Nekoliko malih izmjena će pomoći da se to postigne:

  • Iz YouTube koda (iframe...) obrišite sve što ima pod width i height
    • U gornjem kodu treba obrisati tekst: width="560" height="315"
  • Ubačeni YouTube kod trebate "zaokružiti" s jednim novim DIV elementom:
    • <div class="videowrapper"> & </div>

Točno ovako kako se vidi na slici:

Snimite Novost i ponovno učitajte stranicu na web trgovini. Video bi sada morao biti u cijeloj širini stranice, a isto će se lijepo vidjeti na mobitelima.

Svi KB članci
Da biste redovno pratili sve naše novosti i zanimljivosti...
Facebook logo LinkedIn logo YouTube logo