Cum să adăugați un videoclip ca fundal pe ecran complet în WordPress

Videoclipurile sunt minunate, oferă conținut media mai captivant și captează mai multe emoții decât imaginea.

În prezent, tot mai mulți webmasteri/mărci se îndreaptă spre încorporarea videoclipurilor ca fundal complet în site-ul lor. Dar, complexitatea încorporării videoclipului în fundal necesită o anumită expertiză tehnică.

Pentru a face totul simplu și grozav pentru cititorii noștri, vom enumera un plugin gratuit pentru videoclipurile încorporate în fundal și, de asemenea, vom parcurge un tutorial detaliat despre cum să încorporați videoclipuri în fundal cu configurații simple.

Notă: este necesară o anumită experiență de codare pentru a înțelege complet conținutul. Simțiți-vă liber să puneți întrebări în comentarii, dacă ceva pare confuz.

Plugin pentru a adăuga videoclip ca fundal pe ecran complet în WordPress

Pluginurile sunt grozave, oferă funcționalitatea necesară cu câteva clicuri. Voi enumera câteva plugin-uri înainte de a trece la tutorialul detaliat despre cum să încorporați videoclipuri în fundal folosind codificare.

1. mb .YTPlayer pentru videoclipuri de fundal

Unul dintre pluginurile video populare pentru integrarea în fundal. Pluginul integrează un player personalizat în interiorul elementului paginii.

Cu ajutorul pluginului, utilizatorii pot integra cu ușurință videoclipurile în pagini și pot posta. Instalarea este simplă, iar pluginul generează un cod scurt pentru o integrare ușoară.

Pluginul nu acceptă complet aspectul receptiv.

Detalii complete și descărcare | Demo

2. Slider Hero cu efecte de animație

Motivul pluginului este acela de a vă permite să încorporați fundal video în WordPress cu efecte de glisare. Pluginul oferă 11 animații de fundal, posibilitatea de a adăuga muzică de fundal, integrare video YouTube și Vimeo etc.

Pluginul este compatibil cu orice temă sau editor WordPress precum Gutenberg, așa că va fi receptiv și rapid pe toate site-urile WordPress.

Detalii complete și descărcare | Demo

Acum, vine partea adevărată. Următoarea parte necesită codificare și funcționarea tehnică a platformei WordPress.

Încorporarea video necesită o mulțime de pași. Să parcurgem pașii unul câte unul. Odată ce înțelegi acești pași, poți înțelege cât de complicat poate deveni un lucru simplu.

1. Folosind Div pentru a face spațiu pentru videoclip.

2. Obțineți poziționarea Div în partea stângă sus a ferestrei de vizualizare, fie absolută, fie fixă. Următorul pas este să setați înălțimea și lățimea la 100% și apoi să setați indexul z la 1. Indicele Z definește adâncimea conținutului.

3. Scalare video Div folosind JavaScript.

4. Ecranul monitor redimensionează și scala din nou videoclipul de fiecare dată când utilizatorul scalează videoclipul.

5. Asigurați-vă că codul funcționează pe diferite browsere și sisteme de operare mobile.

Pare multă codare, dar vom folosi un simplu plugin personalizat pentru a automatiza procesul de încorporare a videoclipului în fundalul postării sau paginilor WordPress.

BGVIDEO: Descărcați

Descărcați pluginul și continuați printr-o instalare normală (la fel ca instalarea altor pluginuri).

Acest plugin simplu funcționează în tandem cu shortcode și un shortcode numit „bgvideo” este disponibil în plugin. Shortcode-ul acționează ca o poartă pentru a încorpora videoclipurile în orice pagină sau postare.

Înainte de a trece mai departe, trebuie să introducem câțiva parametri în codul scurt pentru funcționalitatea sa completă.

Parametrii sunt înălțime, lățime, mp4, webm, ogg, redare automată, buclă, sunet și fix. Înălțimea și lățimea se referă la înălțimea și, respectiv, lățimea videoclipului. Câmpurile mp4, webm, ogg se referă la adresa URL a formatului video respectiv. Este necesar să furnizați adresa URL a fiecărui format, astfel încât videoclipul să ruleze pe mai multe dispozitive fără nicio problemă.

Adăugarea de videoclipuri în biblioteca media

Următorul pas include adăugarea de videoclipuri în biblioteca media. Asigurați-vă că adăugați toate formatele (webm, ogg, mp4) în biblioteca media.

Cu ajutorul bgvideo, shortcode-urile video sunt transformate în bgvideo.

Shortcode-ul video arată ca mai jos

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video width=”1280″ height=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

Nu uitați să eliminați semnul procentaj (%) din fața codului scurt video și a etichetei de ancorare.

Cu ajutorul bgvideo, codul de mai sus se va transforma în codul de mai jos

 [bgvideo width="1280" height="720" 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  poster="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  fix="nu"]

Pluginul schimbă automat codul scurt video în codul scurt bgvideo.

Transparența videoclipului pentru utilizator

Cu totul configurat, trebuie să faceți puțină magie în proprietatea CSS a paginii. Motivul este faptul că conținutul paginii împiedică afișarea videoclipului.

CSS va elimina conținutul paginii și va lăsa videoclipul să strălucească pentru vizitatorii dvs.

Introduceți codul CSS de mai jos pentru ca totul să funcționeze bine.

#pagină{

fundal: niciunul;

}

Există o mulțime de alte modificări care sunt necesare pentru a configura complet fundalul video.

Învelire

Cel mai bun pariu pentru cititorii noștri este să folosească un plugin cu drepturi depline și să ignore partea de codare - partea de codificare va înrăutăți lucrurile doar dacă nu cunoști codarea. Puteți devia nevoia către dezvoltatorii dvs., dar asta nu este gratuit.

O altă soluție alternativă excelentă este utilizarea GIF-urilor animate ca fundal. Există două motive pentru utilizarea GIF-urilor animate. Prima este utilizarea lățimii de bandă reduse în comparație cu videoclipul, iar a doua este o instalare ușoară. Un alt mare avantaj este că probabil nu trebuie să vă faceți griji cu privire la portabilitate și problemele de compatibilitate cu alte dispozitive.

Animația poate fi formată cu ușurință folosind CSS sau încărcată prin schimbarea normală a fundalului.

Complexitatea fundalului video este puțin mai înaltă, iar comunitatea WordPress sau echipa principală poate lua notă de asta și poate face modificări în lansările viitoare.

Dacă aveți un videoclip și doriți să îl convertiți într-un gif, atunci există resurse online care o pot face pentru dvs. Dar GIF-urile convertite nu sunt optimizate și au multă greutate cu ele.

Și când trebuie să faceți ajustări la videoclipul pe care intenționați să îl încorporați, puteți găsi câteva editoare video gratuite excelente. Poate fi necesar să tăiați, să decupați sau să măriți un videoclip, să adăugați text sau, probabil, să ajustați tema de culoare pentru a se potrivi cu stilul site-ului dvs.

Dacă sunteți pe Mac, desigur, puteți merge cu iMovie, deoarece este deja preinstalat pe computer (dacă nu, îl puteți obține gratuit). Și dacă sunteți pe Windows – VSDC Free Video Editor este o alegere excelentă. Are literalmente tot ce ai putea avea nevoie, de la setul de instrumente de bază de împărțire/decupare până la corecția culorilor și presetări pentru stilul video. În plus, este foarte puternic când vine vorba de formate și nu va trebui să sacrifici calitatea fișierului de ieșire.

Crezi că am omis ceva? Comentează mai jos și anunță-ne.

*ultima actualizare 25.02.2019