Så här add to YouTube videoklipp som bakgrund i helskärm i WordPress

Ibland försöker vi lägga till nya sätt att göra våra WordPress-webbplatser mer engagerande och visuellt tilltalande, och ett av dem är att lägga till en YouTube-video som bakgrund i helskärm.

När de används på rätt sätt kan bakgrundsvideor öka besökarnas engagemang och den tid de tillbringar på en sida. Vi tycker också att de är ett bra sätt att omedelbart fånga besökarnas uppmärksamhet och skapa ett minnesvärt första intryck.

I den här artikeln visar vi dig hur du lägger till en YouTube-video som helskärmsbakgrund på din WordPress-webbplats.

Varför använda ett YouTube videoklipp som bakgrund i helskärmsläge?

En engagerande och iögonfallande bakgrund med videoklipp på din header är ett bra sätt att få besökarna att stanna kvar på din site. När besökarna först landar på din WordPress site har du bara några sekunder på dig att fånga deras uppmärksamhet.

Idag finns det många olika themes för WordPress som stöder bakgrunder för videoklipp. Att uppladare och servera content för videoklipp på WordPress kan dock ta mycket bandbredd i anspråk.

Beroende på planen för ditt WordPress webbhotell kan du till och med behöva köpa extra lagring.

På WPBeginner rekommenderar vi starkt att du ej uppladdar dina videoklipp till WordPress.

Istället kan du använda en tjänst som YouTube och sedan embedda videoklippet som en bakgrund för din WordPress website. På så sätt kan du sticka ut från dina konkurrenter utan att göra din website långsammare och påverka användarnas upplevelse.

Med detta sagt, låt oss se hur du kan add to ett YouTube videoklipp som en fullskärms bakgrund på din WordPress website. Vi kommer att visa dig två metoder, och du kan använda dessa länkar för att navigera mellan dem:

Metod 1: Använd avancerade WordPress-bakgrunder för fullskärmsvideobakgrund (gratis)

Om du letar efter ett gratis och enkelt sätt att add to bakgrunder med videoklipp, kan du använda Advanced WordPress Backgrounds.

Detta gratis plugin lägger till ett bakgrundsblock som allow you att skapa en bakgrund i helskärm med valfri färg, image eller video, inklusive YouTube-videor.

Först måste du installera och aktivera pluginet i din WordPress dashboard. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.

Efter aktivering, helt enkelt head till sidan eller posten där du vill add en YouTube-video som en helskärms bakgrund. I Gutenberg block editor, gå vidare och klicka på knappen ”+” lägg till block.

I popupen som dyker upp börjar du skriva in ”Bakgrund AWB”. När rätt block dyker upp, ge det ett click för att add to the page.

I menyn till vänster ser du tre tabs för de olika typerna av bakgrunder i full width som du kan skapa: Color, Imagely och Video.

Eftersom du vill lägga till en YouTube-video klickar du på tabben ”Video”. Därefter väljer du tabben ”YouTube / Vimeo”.

Nu kan du copy and paste URL:en till det videoklipp från YouTube som du vill använda på din WordPress blogg.

Nu kommer WordPress Block Editor att visa en Preview av hur denna bakgrund kommer att se ut.

Advanced WordPress Backgrounds ändrar storleken på videon baserat på det content du lägger till högst upp, så oroa dig inte om videoklippet för närvarande ser lite litet ut.

Som standard är bakgrunden för videoklipp inaktiverad på mobila enheter.

Men om du vill visa bakgrunden för videoklippet på mobila enheter klickar du på för att aktivera toggeln ”Aktivera på mobila enheter”.

Utanför boxen kommer blocket att spela hela YouTube-videoklippet på autoplay och på en slinga.

Ett annat alternativ är att spela upp en viss del av videoklippet genom att skriva in de exakta tiderna i boxarna ”Start Time” och ”End Time”.

Du kan också stoppa videoklippet från att spelas upp i en loop genom att inaktivera toggeln ”Loop”.

Som standard spelas videoklippet bara upp när besökaren kan se det i sin webbläsare. Detta hjälper till att upprätthålla din website prestanda, så du kommer vanligtvis att vilja lämna ”Always play” toggle inaktiverad.

När you first add the video, it is shown at 100% opacity, so it looks solid. Dra gratis i slidern ”Image Opacity” för att göra bakgrunden till YouTube-videon mer subtil.

Om du experimenterar med opacitet kanske du också vill prova att lägga till ett färgat överlägg.

Klicka bara för att förstora sectionen ”Overlay Color” och använd sedan settings för att skapa överlägg i olika färger.

Utforska gärna andra Settings, som parallaxeffekt och avstånd, för att få bakgrunden att se ut precis som you vill ha den.

När du är nöjd med hur bakgrunden för YouTube-videon är inställd är det dags att börja lägga till content som gillar links, texter och images.

Börja med att klicka på ikonen ”+” i mitten av blocket Bakgrund (AWB).

Detta öppnar en popup där du kan välja det block du vill add to. Advanced WordPress Backgrounds plugin fungerar med alla standard WordPress-block, så du kan lägga till vilket content du vill.

Om du lägger till text högst upp i blocket, se bara till att ändra textfärgen så att den kompletterar väl med videoklippets bakgrund.

När du är nöjd med hur det ser ut klickar du bara på knappen ”Update” eller ”Publicera” för att göra sidan live. Om du nu besöker din website i WordPress kommer du att se videoklippets bakgrund i action.

Metod 2: Använd Thrive Architect för att add to en bakgrund med videoklipp i helskärm (rekommenderas)

Om du vill customize ditt videoklipp med bakgrund i helskärm eller till och med enkelt designa alla pages på din website, då är den här metoden något för dig.

Det bästa sättet att add to ett YouTube videoklipp som en bakgrund i helskärm är med Thrive Architect.

Thrive Architect är ett användarvänligt page builder plugin som är gjort för Beginnare i åtanke. Förutom en funktion för bakgrund med videoklipp har det en drag and drop-funktion som är flexibel att använda, så att du kan skapa den website du vill ha utan problem.

Dessutom kommer den med smarta templates för landningssidor som är optimerade för konverteringar, så att din landning page är inställd för framgång från början.

För mer information om Thrive Architect, kan du läsa vår Thrive Architect review.

Om du vill använda den här metoden, gå vidare och köp en Thrive Architect plan först. Den är available för köp som en fristående produkt eller som en del av Thrive Themes-paketet.

Sedan installerar du helt enkelt pluginet. Du kan kontrollera vår guide om hur du installerar ett plugin för WordPress för mer information.

Efter det kan du gå till ”Pages” från WordPress admin area och välja en page att edit. Hovera över sidan och välj ”Edit with Thrive Architect”.

Klicka sedan på knappen ”+” till höger på sidan och hitta elementet Background Section.

Klicka bara på den för att lägga till den på page.

Klart att du kan navigera till vänster på page och rulla ner till Background Style section.

Här aktiverar du bara toggle för ”Video bakgrund” och väljer ”YouTube” för källan.

Gå sedan till det videoklipp på YouTube som du vill använda som bakgrund i helskärmsläge.

Kopiera bara YouTube-videons URL så här:

Klistra sedan in URL:en i rätt section.

Du bör nu se bakgrunden på vyn.

Bakgrunden är add to, men det är inte fullskärm ännu.

För att se till att det är fullskärm måste du rulla upp till Main Options section. Aktivera sedan alternativen ”Content covers entire screen width”, ”Matcha höjden till skärmen” och ”Stretch to fit screen width”.

Låt oss utforska några fler alternativ. För att add to content till din bakgrund behöver you bara click the ”+” button on the right side again and drag and drop an element.

You can add texts, images, forms, buttons, testimonials, and more. Thrive Architect har dussintals element som fokuserar på konvertering som du kan utnyttja för din website.

Om du tycker att bakgrundsfärgen inte kontrasterar tillräckligt bra mot texten går du helt enkelt tillbaka till inställningarna för Background Section.

Rulla sedan ner till Background Style igen och välj en enfärgad färg i alternativet Add Layer. Efter det kan du välja en färg som du vill använda som bakgrundsfärg och justera opaciteten som du gillar.

När du är klar klickar du bara på ”Tillämpa”.

En annan sak som du kan justera i bakgrund Section settings är rullningsbeteendet. You can choose whether to make it static, sticky, or parallax.

Vi rekommenderar att du bara håller den statisk så att bakgrunden inte rör sig när användaren rullar ner. Annars kommer videoklippet att fortsätta spelas upp, vilket kan göra din website långsammare.

Nästa sak du kan göra är att gå till Responsive section. Här kan du välja om bakgrunden till videoklippet ska visas på mobil- och surfplatteversionerna av din website.

Det är upp till you, men kom ihåg att videoklipp tar en stund att hämta. Det kan bli irriterande för dina besökare att vänta på att de ska runka när de sitter på en device med liten vy.

När du är nöjd med bakgrunden för YouTube videoklipp i helskärm klickar du bara på knappen ”Save Work” för att spara dina ändringar.

Så där ja!

Nu kan du gå till din WordPress website för att se hur det ser ut Live.

Så här gillar vi vår testwebbsida.

Alternativ: Add to en animerad bakgrund i WordPress

Bakgrunder med videoklipp kan vara visuellt tilltalande, men de kan också göra att din website hämtar långsammare. Om du vill ha ett alternativ kan du istället add to en animerad bakgrund.

Det bästa sättet att göra detta är med SeedProd, ett kraftfullt drag and drop page builder tillägg för WordPress.

It allows you to easily add stunning animated backgrounds to your website using particle.js. Particle.js är ett lättviktigt JavaScript-bibliotek som skapar interaktiva partikelanimationer.

För mer information kan du kontrollera vår guide om hur du lägger till en animerad bakgrund i WordPress.

Bonus tips: Add a YouTube Video Feed in WordPress

Vill du add to fler videoklipp till din website? Även om WordPress har built-in video embed blocks, är de inte det mest visuellt tilltalande sättet att displayed videoklipp, särskilt om du har flera av dem.

Det är där Smash Balloon YouTube Feed Pro kommer in.

Smash Balloon YouTube Feed Pro är marknadens bästa plugin för YouTube-gallerier. Det visar automatiskt alla de senaste videoklippen från din YouTube-kanal, så dina besökare kommer alltid att se det senaste innehållet.

Skapa helt enkelt ett YouTube Feed med Smash Balloon’s användarvänliga Editor, och add det sedan till en page eller post med hjälp av antingen en kortkod eller plugin’ets färdiga block.

Du kan också använda Smash Balloon för att embedda YouTube playlists, favoriter och live streams på din WordPress website.

Det bästa med Smash Balloon är att det inte saktar ner din site. Pluginets utvalda YouTube-funktion för caching kommer att se till att din site alltid hämtar snabbt, vilket är bra för sökmotorsoptimering.

För mer detaljer kan du se vår Step-by-Step guide om hur du visar de senaste videoklippen från en YouTube-kanal i WordPress.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du lägger till en YouTube-video som bakgrund i WordPress. Du kanske också vill kontrollera vår guide om hur man skapar en viral landning page för väntelistor med WordPress och våra expertval för de bästa WordPress theme builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.