Ghid final pentru utilizarea videoclipurilor cu Divi

Videoclipul este un instrument puternic. Dacă o imagine valorează o mie de cuvinte, atunci un minut de videoclip valorează 1,8 milioane de cuvinte (cel puțin asta sugerează cercetătorul Dr. James McQuivey). Videoclipul este un instrument eficient de marketing și, când este făcut corect, un instrument pentru un design frumos.

Adăugarea unui videoclip la site-ul dvs. web este ușor cu Divi. Modulele video și glisorul video vă permit să adăugați videoclipuri găzduite de terți, cum ar fi YouTube și Vimeo, introducând pur și simplu adresa URL a videoclipului. Puteți chiar să adăugați propriile videoclipuri personalizate atât în ​​format mp4, cât și în format webm pentru o compatibilitate maximă a browserului. În plus, Divi vă oferă opțiunea de a vă stiliza videoclipurile cu suprapuneri de imagini și butoane de redare pentru a vă ajuta să se potrivească cu designul site-ului dvs.

Pe lângă încorporarea videoclipurilor pe pagina dvs., Divi oferă și o soluție simplă pentru adăugarea de videoclipuri de fundal. În prezent, când creați un site cu generatorul Divi, fiecare secțiune, rând, coloană și 20 din cele 37 de module au capacitate video de fundal.

Pentru majoritatea oamenilor, utilizarea videoclipului în Divi este la fel de ușoară ca introducerea linkului către videoclipul YouTube sau Vimeo pe care îl doriți și afișarea acestuia pe postarea sau pagina dvs. Dar în această postare vom vorbi despre cum și de ce Divi face ceea ce face cu videoclipurile, astfel încât să fiți complet echipat pentru orice caz de utilizare specială, stiluri unice sau experimente creative pe care ați dori să le desfășurați.

În acest ghid vom discuta despre ...

• funcționarea din culise a modulului video și a modulului glisor video, astfel încât să îl puteți utiliza mai eficient.
• diferența dintre auto-găzduirea videoclipurilor dvs. și utilizarea unui gazdă terță parte.
• câteva sfaturi despre optimizarea videoclipurilor dvs. pentru web.
• cele mai bune practici pentru fundaluri video.
• un ghid general pentru alegerea dimensiunilor videoclipului.
• și câteva hacks utile pentru videoclipurile de fundal.

Să începem.

Explorarea modulului video

Modulul video vă permite să încorporați videoclipuri pe pagina dvs. din aproape orice sursă. Documentația Divi din modulul video explică toate caracteristicile și cum să adăugați un videoclip la pagina dvs. Dar pentru această postare, am să sap un pic mai adânc.

Adăugarea unui videoclip găzduit de sine în modulul video

Pentru a adăuga un videoclip auto-găzduit cu modulul video, trebuie să încărcați un videoclip sau să adăugați o adresă URL la fișierul video în setările Video. Și trebuie să adăugați videoclipul dvs. în două formate de fișiere.

Și asta este tot ce trebuie să faceți cu adevărat. Destul de simplu.

Cu toate acestea, în culise, Divi folosește elementul video HTML5 pentru a afișa videoclipul. Când alegeți să adăugați un videoclip auto-găzduit sau să încărcați propriul videoclip folosind formatele mp4 și webm, structura codului pe care îl implementează Divi arată ca următoarea:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

Iată câteva lucruri pe care vreau să le subliniez despre ceea ce face acest cod:

1. Observați atributul comenzilor din eticheta <video>. Aceasta îi spune videoclipului să afișeze comenzile. Destul de simplu.
2. Observați cele două etichete <sursă> din etichetele <video> de deschidere și de închidere. Sursele constau din fișiere video. Primul este un mp4, iar al doilea este un format de fișier webm. Ambele sunt necesare pentru asistență maximă a browserului. Comanda este importantă, de asemenea. Doriți ca browserul să vadă mai întâi mp4, deoarece acesta este cel mai universal acceptat. Voi discuta mai multe despre aceste formate mai târziu.
3. Rândul care scrie „Eroare la încărcarea acestei resurse” va fi afișat dacă primele două formate nu sunt recunoscute.
4. Ceea ce nu puteți vedea este că Divi a stilizat această etichetă <video> și i-a dat o lățime de 100% pentru a o face receptivă, astfel încât videoclipul dvs. să se adapteze la lățimea coloanei în care se află.

Acest element video HTML5 crește ca noua modalitate standard de a afișa videoclipuri pe web. Din fericire, Divi se ocupă de asta pentru noi.

Suprapunere de imagini video auto-găzduite

În afară de opțiunea de a adăuga videoclipurile dvs. la modulul video, Divi vă permite, de asemenea, să adăugați o imagine suprapusă personalizată pentru videoclipul dvs.

Dacă alegeți să adăugați o imagine suprapusă la videoclipul dvs. găzduit de dvs., trebuie să încărcați propria dvs. imagine. Opțiunea de a genera imaginea din videoclip se aplică numai adreselor URL ale videoclipurilor găzduite de terți, cum ar fi Youtube și Vimeo.

Deoarece imaginea va deveni dimensiunea videoclipului și deoarece videoclipul se va regla la dimensiunea coloanei în care se află, este important să alegeți imaginea cu dimensiunea potrivită. Videoclipurile de pe Youtube, Vimeo și majoritatea celorlalte formate au de obicei un raport de aspect de 16: 9. Deci, dacă lățimea maximă a conținutului este setată la standardul Divi de 1080px, atunci urmând raportul de aspect 16: 9, videoclipul dvs. va avea dimensiunile 1080 × 608. Prin urmare, imaginea dvs. suprapusă ar trebui să aibă 1080 × 608 pixeli.

Butonul Redare

Odată ce imaginea dvs. a fost setată, Divi va aplica automat un buton de redare personalizat. Puteți schimba chiar și culoarea butonului, dacă doriți, în Setarea video din fila Design.

Odată ce utilizatorul face clic pe suprapunere cu butonul de redare personalizat, suprapunerea și butonul vor dispărea și videoclipul de sub suprapunere va începe să fie redat automat.

Adăugarea unei adrese URL a unui videoclip găzduit de o terță parte

Cea mai obișnuită metodă de adăugare a unui videoclip la modulul video este de a adăuga pur și simplu adresa URL a unui videoclip găzduit de o terță parte, cum ar fi Youtube sau Vimeo. Deci, în loc să adăugați cele două formate video, așa cum ați face pentru videoclipurile găzduite de dvs., ar trebui să adăugați pur și simplu o adresă URL în bara de intrare din fundal.

În culise, Divi adaugă un div înveliș cu lățime fluidă și încorporează un iframe care afișează videoclipul. Acest iframe este același pe care l-ați obține direct de pe youtube. Iată un exemplu de cum arată codul atunci când adăugați un videoclip YouTube cu modulul video:

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

Divizorul cu clasa „fluid-width-video-wrapper” se înfășoară în jurul iframe-ului și îi conferă o lățime de 100%, astfel încât să se adapteze la lățimea containerului său, făcându-l receptiv.

Dacă alegeți să adăugați o imagine suprapusă, puteți alege să încărcați propria dvs. sau, pentru a economisi puțină durere de cap, puteți pur și simplu să faceți clic pe „generați din videoclip” și Divi va aplica automat o imagine suprapusă preluată din videoclip. De asemenea, puteți alege să personalizați butonul de redare.

Explorarea modulului Video Slider

Sliderul video funcționează foarte asemănător cu modulul video în modul în care videoclipurile sunt implementate pe o pagină web, cu excepția cazului în care videoclipurile sunt într-un slider. Acesta este un mod convenabil de a afișa videoclipuri într-un singur loc, astfel încât utilizatorii dvs. să poată derula pur și simplu un grup de videoclipuri pe rând. Pentru mai multe detalii despre opțiunile modulului Video Slider, puteți vizita pagina de documentație.

Unul dintre elementele mele preferate ale glisorului video este pista de miniaturi pe care o puteți utiliza pentru a controla diapozitivele. Este atât convenabil, cât și captivant.

Puteți chiar personaliza culorile comenzilor glisante din setările modulului, inclusiv Culoarea suprapunerii miniaturilor.

Imaginile în miniatură vor rămâne la dimensiunea imaginii originale pe care le încărcați, deci aveți grijă să nu încărcați o grămadă de imagini mari în glisor, deoarece acest lucru ar putea încetini site-ul dvs. De asemenea, miniaturile nu pot fi generate automat din videoclip. Trebuie să le încărcați singur.

Miniaturile urmează un raport de aspect de 4: 3, astfel încât, pentru a regla imaginile glisante 16: 9, va arunca în aer și va tăia dreapta și stânga imaginii pentru a acoperi întregul spațiu.

Sfat de proiectare : Un truc pe care l-ați putea face pentru a reduce dimensiunea fișierului și pentru a evita ca miniaturile să taie o parte a imaginii este personalizarea miniaturilor la 253 × 190 pixeli (un raport de aspect 4: 3) și selectați opțiunea pentru a ascunde afișează suprapuneri de imagini pe videoclipul principal. În acest fel, imaginile dvs. suprapuse vor fi folosite doar pentru miniaturi și, prin urmare, nu va trebui să fie mai mari pentru a le ajusta pentru dimensiunea principală a videoclipului.

4 sfaturi importante pentru auto-găzduirea videoclipurilor dvs.

1. Folosiți un CDN. Dacă vă gândiți să adăugați videoclipurile dvs. prin biblioteca media WordPress, gândiți-vă din nou. Deși este posibil să găzduiți videoclipuri pe propria dvs. instalare WordPress pe propriul dvs. server, probabil că veți întâlni anumite limitări privind lățimea de bandă, dimensiunea fișierului, spațiul de stocare etc., care pot cauza durarea de încărcare a site-ului dvs. și poate duce la streaming video redus . Aș lua în considerare găzduirea videoclipurilor dvs. pe un serviciu extern precum Amazons3. Acest lucru vă va ajuta cu timpul de încărcare a paginii. În plus, unii dintre acești furnizori oferă un nivel de securitate pentru a împiedica oamenii să descarce videoclipurile dvs. (sau cel puțin îngreunează descărcarea).
2. Optimizați fișierul pentru web. Videoclipurile ocupă multă lățime de bandă, mai ales atunci când utilizați un fundal video mare. Va trebui să aveți grijă să nu vă suprasolicitați pagina. Există o serie de factori de luat în considerare dacă doriți să vă optimizați în mod corespunzător videoclipul pentru web. Iată o ecuație utilă de luat în considerare:
   dimensiunea fișierului = bitrate (kilobiți pe secundă) x durata (durata videoclipului în secunde)

   Deci, dacă doriți să obțineți o dimensiune mai mică a fișierului, va trebui să reduceți durata (lungimea videoclipului) și / sau rata de biți (numărul de kilobiți pe secundă care este transmis). Rata de biți trebuie să fie întotdeauna mai mică decât viteza de conectare a utilizatorului. Având în vedere că viteza internetului la nivel mondial este de aproximativ 7 Mbps (SUA este de aproximativ 18 Mbps), va trebui să păstrați rata de biți cu mult sub aceasta pentru a evita întreruperea streamingului.

   Nu trebuie să faci asta singur. Există câteva instrumente gratuite excelente pentru a vă ajuta cu compresia video, cum ar fi Handbrake.

   Vă sugerez să citiți „5 cele mai bune moduri de a reduce dimensiunea videoclipului pentru o încărcare mai rapidă” dacă doriți să aflați mai multe despre optimizarea videoclipurilor dvs. pentru web. Există câteva resurse minunate enumerate și o explicație excelentă cu privire la modul de utilizare a frânei de mână.

3. Adăugați formate de fișiere corecte.
   Așa cum am menționat anterior, dacă vă găzduiți propriile videoclipuri (nu vă bazați pe o terță parte pentru a le găzdui, cum ar fi Youtube), va trebui să adăugați videoclipul atât în ​​format mp4, cât și în format webm.

   Mp4 este în prezent formatul cel mai acceptat, deoarece redă încă unele dintre browserele vechi folosind flash și este standardul pentru suportul browserului mobil. Divi listează primul mp4 în cod, astfel încât dispozitivele iOS să poată recunoaște fișierul imediat.

   Webm este al doilea format cel mai acceptat. A fost construit pentru web și pare să fie aici pentru a rămâne. Produce streaming de înaltă calitate cu compresie excelentă. Și este open source.

   Combinate, aceste două oferă asistență pentru majoritatea browserelor web, inclusiv pentru mobil.

   Un instrument de conversie gratuit excelent ar fi playerul media VLC.

4. Definiți tipurile MIME: Pentru ca formatul video WEBM să funcționeze în toate browserele, serverul dvs. trebuie să aibă desemnate tipurile MIME corecte. Puteți afla mai multe despre utilizarea .htaccess pentru a defini tipurile MIME aici. Dacă observați că videoclipurile dvs. nu sunt redate în anumite browsere, atunci acesta este probabil motivul. Pentru a adăuga tipuri MIME în fișierul dvs. .htaccess, utilizați un client FTP (cum ar fi FileZilla) pentru a accesa fișierele rădăcină WordPress. Acolo ar trebui să găsiți fișierul .htaccess. Deschideți fișierul într-un editor de text. Sub rândul care scrie „#END WordPress” adăugați următoarele:

   AddType video / mp4 .mp4 .m4v
   AddType video / ogg .ogv
   AddType video / webm .webm

   

   Apoi salvați fișierul. Acum formatele dvs. video vor fi recunoscute pe toate browserele.

Gazduire cu platforme terțe (Youtube și Vimeo)

Dacă descoperiți că conversia și comprimarea propriilor videoclipuri este prea multă muncă, puteți oricând să lăsați o terță parte să facă treaba pentru dvs.

Dacă nu știți nimic despre videoclip, vă sugerez să luați acest traseu. Dacă nu ești nebun după limitările de pe YouTube sau vimeo free, poți mușca glonțul pentru Vimeo Pro. S-ar putea să merite durerea de cap pe termen lung. Ceea ce nu doriți este să puneți un videoclip pe site-ul dvs. care îl încetinește sau arată slab. Pur și simplu nu merită.

Platforme video terță parte acceptate de modulele video și video Slider

Dacă doriți să utilizați modulele Video și Slider video pentru a adăuga videoclipuri terță parte, puteți utiliza următoarele platforme populare:

• Youtube
• Vimeo
• Dailymotion

Cum se adaugă videoclipuri terță parte folosind Divi

Pentru a adăuga un videoclip de pe oricare dintre aceste platforme, va trebui să accesați site-ul lor pentru a obține linkul de partajare.

Apoi, puteți lipi asta în modulul Video sau Video Slider.

Faceți clic pe butonul „Generați din videoclip” pentru a adăuga o suprapunere de imagini. Sau încărcați una dintre a dvs.

Salvează setările. Si asta e.

Rețineți că Divi este construit pe WordPress, astfel încât să puteți încorpora oricând videoclipuri de pe platforme terțe folosind codurile de încorporare sugerate ale acestora fără a utiliza modulul video. Pur și simplu adăugați un modul text și introduceți codul de încorporare în caseta de conținut.

Poate fi necesar să personalizați lățimea și înălțimea pentru ca încorporarea dvs. să se adapteze pentru un aspect receptiv.

Dar Wistia?

Wistia este o platformă puternică pe care o folosește o mulțime de oameni, dar, din păcate, nu se joacă bine cu modulele Divi în prezent. Cu toate acestea, puteți încorpora Wistia utilizând codul de încorporare pe care îl furnizează.

Lipirea codului respectiv într-o secțiune de conținut de pe site-ul dvs. Divi va afișa videoclipul.

Puteți chiar lipi codul în secțiunea de conținut a modulului glisor pentru a adăuga un videoclip wistia ca unul dintre diapozitivele dvs. Cu toate acestea, va trebui să ajustați unele CSS pentru a arăta așa cum doriți.

Utilizarea fundalurilor video cu Divi

Ar trebui să utilizați chiar și un fundal video?

Înainte de a intra în detaliile fundalurilor video, este important să vă întrebați cu sinceritate dacă ar trebui sau nu să utilizați unul. Nu mă înțelegeți greșit, ador un fundal video bun. Dar uneori nu are sens. Nu vă faceți nicio greșeală, videoclipurile vă vor încetini site-ul și vă pot distrage atenția asupra conținutului dvs. Așadar, nu alegeți niciodată un fundal video în locul unei imagini mai eficiente. Site-ul dvs. poate fi mai bun fără unul.

Dar, există momente în care videoclipul este o soluție mai bună decât o imagine. Când ați terminat corect, un fundal video vă poate aduce conținutul la viață. Așadar, faceți ca videoclipul să fie intenționat și să-l conteze.

Capacități de fundal video în cadrul Divi

Puteți adăuga un fundal video aproape oriunde doriți folosind Divi Builder. Puteți adăuga un fundal video la fiecare secțiune, rând și coloană. Puteți adăuga chiar fundaluri video la majoritatea modulelor.
Iată modulele care acceptă fundaluri video.

• Antet Fullwidth (funcționează și pe opțiunea ecran complet)
• Meniu cu lățime completă
• Portofoliu cu lățime completă
• Glisor de postare cu lățime completă (când nu utilizați imaginea prezentată, puteți utiliza un fundal video pentru a servi drept fundal pentru toate diapozitivele)
• Fullwidth Post Title
• Glisor pentru lățime completă (funcționează cu diapozitive individuale)
• Modul audio
• Baruri
• Blurb Module - asigurați-vă doar că dați modulului ceva umplutură.
• Modulul de chemare la acțiune
• Temporizator de numărătoare inversă
• E-mail Optin
• Portofoliu filtrabil
• Modul de autentificare
• Modulul de numărare a numerelor
• Modulul persoană
• Setări portofoliu
• Post Slider (Când nu utilizați imaginea prezentată, puteți utiliza un fundal video pentru a servi drept fundal pentru toate diapozitivele)
• Titlul postării
• Tabel de prețuri (Puteți seta un fundal video pentru modul și pentru diferite tabele individual)
• Glisor (numai pentru fundalurile diapozitivelor individuale)
• Filele (atât pentru fundalul modulului, cât și pentru filele individuale)
• Mărturie
• Text
• Comutare

Biblioteci video stoc

Partea dificilă a adăugării unui fundal video pe site-ul dvs. este găsirea imaginii corecte și asigurarea că are dimensiunea potrivită. Din fericire, nu trebuie să vă creați propriile fundaluri video personalizate. Există biblioteci de stocuri video cu redevență disponibile, care pot funcționa bine pentru site-ul dvs. web. Dacă sunteți în căutarea unor imagini video gratuite, câteva locuri bune pentru a începe sunt video, coverr sau video. Dacă sunteți în căutarea unor versiuni cu plată mai bune, puteți vizualiza videohive, videoblocks sau pond5. Unele dintre aceste site-uri folosesc fundaluri video foarte bine dacă sunteți în căutarea unei inspirații.

Cum să adăugați un fundal video la pagina dvs.

După ce găsiți (sau creați) videoclipul potrivit, lucrurile devin foarte ușoare. Pentru a adăuga un fundal video la pagina dvs. web Divi, pur și simplu implementați constructorul vizual și găsiți secțiunea în care doriți să adăugați videoclipul și faceți clic pe pictograma Setări secțiune.

Sub fila conținut, faceți clic pe pictograma / fila imagine de fundal sub opțiunile de fundal. Dacă aveți un videoclip auto-găzduit, introduceți atât formatele mp4, cât și formatele webm. Apoi introduceți dimensiunile videoclipului, astfel încât Divi să știe cum să-l dimensioneze corect.

Acum, accesați fila imagine de fundal și adăugați o imagine de fundal care ar servi ca o soluție bună pentru dispozitivele mobile.

Apoi salvați setările. Este atat de simplu.

Dacă intenționați să utilizați unul dintre videoclipurile pe care le găzduiți acum pe youtube (sau vimeo) ca fundal, acest lucru nu este posibil în prezent în cadrul constructorului Divi. Amintiți-vă că aveți nevoie de aceste videoclipuri în formatele corecte pentru a fi afișate pe toate browserele. Cu toate acestea, puteți descărca acel videoclip Youtube (dacă vă aparține) și îl puteți converti în formate mp4 și webm pentru a le folosi pe fundal.

Sfat pentru proiectarea fundalului: utilizarea unui fundal video pentru glisorul dvs. de lățime completă

Dacă sunteți în căutarea unui mod creativ de a vă prezenta postările prezentate pe pagina blogului dvs., puteți adăuga un fundal video în glisorul de postare. Lasă-mă să-ți arăt ce vreau să spun.

Accesați pagina dvs. utilizând Visual Builder și adăugați o secțiune de lățime completă în partea de sus a paginii, cu un modul glisor post lățime completă.

Sub fila Conținut, sub Afișare imagine prezentată, selectați „NU”.

Apoi, în secțiunea Background, selectați fila background video și adăugați ambele formate ale videoclipului dvs., împreună cu dimensiunile.

De asemenea, este o idee bună să adăugați o imagine de fundal ca o rezervă pentru dispozitivele mobile care nu pot afișa fundaluri video.

Asta e.

Acum utilizatorul poate derula prin glisorul dvs. de postare recomandat cu un videoclip de fundal rece. Asigurați-vă că fundalul videoclipului este suficient de subtil pentru a nu distrage atenția de la conținut.

Cele mai bune practici pentru fundaluri video

Cu toate posibilitățile oferite de fundalurile video, am considerat că este mai bine să includ câteva bune practici generale.

1. Includeți întotdeauna o imagine de fundal ca alternativă pentru mobil. Dispozitivele mobile nu vor reda automat videoclipuri mari. Acesta este motivul pentru care Divi afișează imaginea alternativă în mod implicit pe dispozitivele mobile.
2. Folosiți un mic videoclip. Pentru videoclipurile de fundal, puteți scăpa de rezoluția 720p, deoarece fundalul este un al doilea gând la conținutul / textul care suprapune videoclipul. Calitatea nu va suferi atât de mult încât ați observa.
3. Luați în considerare o suprapunere. Adăugarea unei suprapuneri de culoare semi-transparente deasupra videoclipului vă va ajuta să scăpați cu o dimensiune mai mică a fișierului, deoarece va ascunde detaliile dezordonate ale unui videoclip cu o calitate mai mică. În plus, va face ca textul dvs. să iasă mai mult în evidență.
4. Nu utilizați sunet. Nu aveți nevoie de sunet pentru fundaluri video, așa că scoateți-l. Acest lucru va reduce dimensiunea fișierului.
5. Utilizați atât formatele mp4, cât și formatele webm pentru asistență pe mai multe browsere.

Întrerupeți videoclipul?

Este posibil să fi văzut această opțiune listată în setările din opțiunile de fundal.

În unele cazuri, videoclipul poate intra în conflict cu un alt sunet de redare a fundalului video. Această opțiune ajută la menținerea redării unui singur sunet video la un moment dat.

Hacks video Divi

Există câteva personalizări mai avansate ale videoclipurilor și ale fundalului video pe care vi le-ați putea ajuta. Iată câteva.

Redimensionați butonul de redare

Dacă doriți să modificați dimensiunea butonului de redare, accesați setările modulului video, sub fila Avansate, și introduceți următoarele CSS personalizate în caseta etichetată „Pictogramă video”:

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

Puteți ajusta valorile la dimensiunea dorită. Asigurați-vă că dimensiunea fontului și înălțimea liniei rămân întotdeauna aceleași, iar marginea de sus și marginea de jos rămân întotdeauna o valoare negativă care este jumătate din dimensiunea fontului. De exemplu, dacă doriți să o faceți mai mică, valorile ar fi.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

Cum să opriți fundalul video pentru a nu face pauză la clic

În unele cazuri, puteți constata că, făcând clic pe fundalul videoclipului, veți întrerupe videoclipul. Puteți dezactiva această caracteristică adăugând următorul CSS personalizat în fișierul style.css din tema copilului dvs. (sau în personalizatorul de teme> CSS suplimentar):

.et_pb_section_video_bg video {
pointer-events: none;
}

Cum să opriți fundalul video de la buclă

Poate că ți-ai amintit acest sfat de la una dintre postările noastre mai vechi. În mod implicit, fundalul video va continua să se bucle. Acest lucru este intenționat, deoarece în mod normal asta doriți să facă un fundal video. Dar dacă doriți doar să afișați videoclipul de fundal o dată și apoi să renunțați, puteți dezactiva acțiunea buclă accesând Divi> Opțiuni temă> Integrare și introduceți următoarele în:

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Dimensiuni video pentru Divi

Nu am vrut să termin postarea fără să menționez dimensiunile videoclipului. Nu există o regulă fermă cu privire la dimensiunile care trebuie utilizate, având în vedere că toate videoclipurile și site-urile web sunt diferite. Un videoclip 720p (1280 × 720) poate arăta grozav întins pe un ecran 1920 × 1080, în timp ce altul va arăta oribil. Atunci când decideți cu privire la dimensiunile sau rezoluția unui videoclip pentru site-ul dvs., puteți urmări dimensiunile imaginii pentru aspectele și modulele coloanei Divi ca linii directoare generale. Pur și simplu, videoclipul dvs. ar trebui să fie cel mai apropiat de lățimea coloanei în care se află, fără a intra sub. Deci, dacă aveți o coloană cu lățime completă care are o lățime maximă de 1080px, atunci nu ar trebui să aveți nevoie de un videoclip cu o rezoluție mai mare de 720p (1280 × 720). Cu toate acestea, dacă utilizați un fundal video care se întinde pe întreaga lățime a browserului dvs., poate fi necesar să mergeți la 1080p (1920 × 1080), astfel încât atunci când se întinde pe întreaga lățime a browserului pe monitoare mai mari, nu arata granulat.

Dacă aveți de gând să vă bazați pe un terț profesionist în video pentru a vă pregăti videoclipurile pentru web, iată o listă cu rezoluțiile video recomandate pentru youtube.

2160p: 3840 × 2160
1440p: 2560 × 1440
1080p: 1920 × 1080
720p: 1280 × 720
480p: 854 × 480
360p: 640 × 360
240p: 426 × 240

Acestea respectă raportul de aspect 16: 9, astfel încât să nu vedeți barele negre de pe părțile laterale ale videoclipului.

Vimeo oferă, de asemenea, linii directoare pentru videoclipuri. Îmi place în special postarea lui Vimeo pe elementele de bază ale compresiei video.

Gânduri finale

Videoclipurile vor continua să fie o parte integrantă a experienței noastre online mult timp. Deci, este important să știi ce faci atunci când adaugi videoclipuri pe site-ul tău. Dacă decideți să utilizați videoclipuri pe site-ul dvs. web, Divi simplifică procesul, oferind o soluție cross browser pentru videoclipuri auto-găzduite și o soluție convenabilă pentru încorporări terțe. Dar Divi nu poate face totul pentru tine. Sperăm că această postare vă va ajuta în procesul de selectare a videoclipului potrivit și pregătirea acestuia pentru web.

Aștept cu nerăbdare să aud de la dvs. în comentarii.