Divi Video Pro: Ett nytt plugin för proffsigt inbäddad video i Divi 5

Divi Video Pro är mitt nya tillägg för att bädda in videor i Divi 5. Det innehåller två moduler, Video Pro och Video Slider Pro, med videopopuper, automatisk uppspelning, loopning, ljudlös förhandsvisning och många designinställningar. Samtidigt hjälper det dig att hålla sidorna snabba.

Idén kom faktiskt från er. I flera år har jag fått frågor i kommentarerna till mina Divi-guider om hur man får videor att spelas upp automatiskt, loopa, öppnas i en popup eller bara se lite bättre ut. Svaret har nästan alltid varit ”lägg till den här kodsnutten”. Till slut byggde jag helt enkelt tillägget jag själv hade velat ha.

Vad är Divi Video Pro?

Divi Video Pro är ett premiumtillägg till WordPress som lägger till två videomoduler i Divi 5 Visual Builder:

• Video Pro för en enskild video. Till exempel en stor video högst upp på sidan, en produktdemo, ett kundomdöme eller en knapp som öppnar en video i en popup.
• Video Slider Pro för flera videor i samma slider. Till exempel en kursserie, flera kundomdömen eller en portfolio, med miniatyrbilder, prickar, pilar eller svepnavigering.

Båda modulerna fungerar med YouTube, Vimeo och videofiler från mediabiblioteket (MP4 och WEBM). Du ställer in allt i Visual Builder utan att skriva kod. Divis egna videomoduler finns kvar och dina befintliga videor påverkas inte.

Mina sex favoritfunktioner

I videon ovan går jag igenom mina sex favoritfunktioner. Här är en kort sammanfattning.

1. Videopopuper med några få klick

Popuper ger videorna det utrymme de behöver. Du kan öppna valfri video i en stilren popup med suddig eller nedtonad bakgrund. Visa en förhandsvisning av videon på sidan eller ersätt videon helt med en knapp som öppnar popupen. Knappen är en vanlig Divi-knapp och kan utformas precis som andra knappar på webbplatsen.

I slidermodulen kan nästa video börja spelas automatiskt i popupen, ungefär som i en spellista.

2. Automatisk uppspelning och loopning

Du aktiverar automatisk uppspelning med ett klick. Sedan väljer du när videon ska starta: när sidan laddas, efter en fördröjning på valfritt antal millisekunder eller först när videon blir synlig på skärmen. Du kan också pausa videon när den försvinner ur bild och återuppta eller starta om den när den blir synlig igen.

Du styr loopningen på samma sätt. Låt videon loopa oändligt eller ett bestämt antal gånger. När den är klar kan du välja om den sista eller första bildrutan, miniatyrbilden, en egen överläggsbild eller en uppspelningsknapp ska visas.

En sak att känna till är att webbläsare bara tillåter automatisk uppspelning utan ljud. Därför startar videor som spelas upp automatiskt alltid med ljudet avstängt. Det leder oss till nästa funktion.

3. Silent Preview, ljudlös förhandsvisning

Silent Preview spelar upp videon utan ljud, ungefär som en trailer eller en animerad miniatyrbild. När besökaren klickar börjar videon om från början med ljud. Jag använder gärna den här funktionen i herosektioner, där en video som plötsligt börjar spela med ljud annars kan överraska besökaren. Det finns flera inställningar som gör att du kan anpassa funktionen efter dina behov.

4. Snabbare sidor utan onödig belastning

En vanlig inbäddad video laddar flera megabyte skript så fort sidan öppnas, även om ingen trycker på play. Med Ladda inte data förrän vid klick visas i stället en bild. Själva videospelaren laddas först när någon vill titta.

Jag jämförde samma sida med Divis inbyggda videomodul och Video Pro. Videon var densamma, det var bara modulen som ändrades:

• Lighthouse-poäng på mobil: 95 med Video Pro och 87 med Divis videomodul
• Sidans storlek: 385 KB, jämfört med 1 379 KB
• Förfrågningar till YouTube innan besökaren klickar: 0, jämfört med 21

(Lighthouse-test på mobil med simulerad 4G, medianen av fem körningar på en lokal testserver.)

Tilläggets egna filer laddas bara på sidor där någon av modulerna används. Det finns också en inställning för laddningsprioritet, så att videon högst upp på sidan blir redo snabbt medan videor längre ner väntar tills de behövs.

5. Integritet inbyggd från början

När funktionen Ladda inte data förrän vid klick är aktiverad skickas inga besökaruppgifter till YouTube eller Vimeo innan någon trycker på play. Du kan dessutom aktivera YouTubes integritetsförbättrade läge och Do Not Track för Vimeo-videor. Inställningen Generera från video sparar videons miniatyrbild i mediabiblioteket, så även förhandsvisningen laddas från din egen webbplats.

Om du behöver inhämta samtycke till cookies för inbäddade videor beror på webbplatsen och vilket land du verkar i. Kontrollera därför även dina egna integritetsinställningar. Det här ger dig ändå en betydligt bättre utgångspunkt än en vanlig inbäddning.

6. Video Slider Pro

Video Slider Pro har samma funktioner som Video Pro, som automatisk uppspelning, loopning och popuper, men för flera videor samtidigt. Dessutom får du:

• Rad med miniatyrbilder, pricknavigering eller ingen navigering alls, samt pilar
• Dra eller svep för att byta bild
• Välj hur många miniatyrbilder som ska visas på olika enheter
• Pilar, prickar och dragfunktion för att bläddra bland miniatyrbilder när det finns fler än vad som får plats
• Möjlighet att dölja miniatyrbilden för den aktiva videon
• Spela upp nästa bild när en video tar slut och börja om efter den sista

Endast videon på den synliga bilden laddas, så även en slider med tio videor förblir lätt.

Styla alla delar av videospelaren

Under fliken Design finns inställningar för nästan allt: uppspelningsknappen, dess ikon, ljudknappen, knappen för Silent Preview, överlägget och popupen. Du kan använda valfri Divi-ikon, klistra in egen SVG-kod eller ladda upp en SVG-fil, placera uppspelningsknappen på en av nio positioner och ge den en diskret pulserande animation. Du kan också dölja spelarens egna kontroller och använda egna knappar för uppspelning och ljud i stället.

Fungerar med ditt befintliga arbetssätt i Divi 5

• Theme Builder: lägg till en video i en mall så visas den på alla sidor som använder mallen.
• Dynamiskt innehåll: använd samma inläggsmall men visa en unik video i varje inlägg, hämtad från ett anpassat fält. ACF fungerar utmärkt.
• WPML: översätt videon, bilden och knapptexten för varje språk. Den svenska sidan kan visa en svensk video och den tyska sidan en tysk video.
• Cache- och prestandatillägg: testat med WP Rocket, LiteSpeed Cache, W3 Total Cache, Autoptimize, SiteGround Speed Optimizer och många fler.
• Tillgänglighet: alla knappar fungerar med tangentbord och skärmläsare. Det finns också ett alternativ för att respektera besökare som föredrar mindre rörelse.

Systemkrav

Divi Video Pro är endast utvecklat för Divi 5. Du behöver:

• Divi-temat, version 5 eller senare. Ett barntema fungerar också.
• WordPress 6.4 eller senare
• PHP 7.4 eller senare

Det fungerar inte med Divi 4, temat Extra eller det fristående tillägget Divi Builder.

Pris och lanseringsrabatt

Du får båda modulerna och alla funktioner i ett och samma tillägg, som får användas på obegränsat antal webbplatser, även kunders webbplatser. Det enda du väljer är hur länge du vill ha uppdateringar och support:

• Årslicens: 49 USD per år
• Livstidslicens: 179 USD som engångsbetalning. Finns endast på victorduse.com.

Använd koden LAUNCH20 i kassan för att få 20 % rabatt. Då kostar livstidslicensen 143,20 USD. Lanseringserbjudandet gäller under en begränsad tid.

Du har också 14 dagars pengarna-tillbaka-garanti. Testa tillägget i ett riktigt projekt. Om det inte motsvarar dina behov kontaktar du mig inom 14 dagar, så får du hela beloppet tillbaka.

Vanliga frågor

Kan jag skapa en videopopup i Divi 5 utan kod?
Ja. Aktivera popupen i modulen Video Pro och välj om du vill visa en förhandsvisning av videon eller bara en knapp som öppnar popupen.

Hur får jag en video att spelas upp automatiskt och loopa i Divi 5?
Aktivera Autoplay och Loop i Video Pro. Du kan starta videon när sidan laddas, efter en fördröjning eller när den blir synlig på skärmen. Du kan också välja om den ska loopa oändligt eller ett bestämt antal gånger.

Kan jag använda tillägget på kunders webbplatser?
Ja. Båda licenserna gäller för obegränsat antal webbplatser, både dina egna och sådana du bygger eller underhåller åt kunder.

Gör tillägget webbplatsen långsammare?
Nej, det är utvecklat för att göra tvärtom. I mitt test var sidan med Video Pro ungefär en fjärdedel så stor som samma sida med Divis videomodul.

Fler frågor och svar finns i vanliga frågor om Divi Video Pro.

Se hur det fungerar

Det enklaste sättet att förstå vad tillägget kan göra är att testa det själv. Alla exempel i demoversionen av Divi Video Pro är byggda med tillägget. Vill du läsa mer om alla inställningar hittar du dem i dokumentationen för Divi Video Pro.

Saknar du någon funktion i tillägget får du gärna berätta det för mig. Jag besvarar själv alla supportfrågor.