Hur man lägger till YouTube-video som helskärmsbakgrund i WordPress

Helskärmsvideobakgrunder fångar omedelbart uppmärksamheten. De förvandlar en enkel WordPress-webbplats till något som känns polerat, modernt och professionellt designat.

Sammantaget har vi sett hur mycket en välplacerad videobakgrund kan förbättra första intrycket och hålla besökarna engagerade.

Den goda nyheten är att du inte behöver specialprogramvara eller anpassad utveckling. Du kan till och med använda YouTube-videor du redan har, vilket gör det till ett prisvärt sätt att lägga till rörelse och personlighet till dina sidor.

I den här guiden guidar vi dig genom de enklaste sätten att lägga till en YouTube-video som din WordPress-bakgrund med hjälp av nybörjarvänliga verktyg.

Varför använda en YouTube-video som bakgrund i helskärm?

Att använda en YouTube-video som bakgrund i helskärmsläge är ett kraftfullt sätt att omedelbart fånga besökarnas uppmärksamhet och hålla dem engagerade på din webbplats.

Här är fördelarna:

• Bibehåll snabba laddningstider för sidor: Att bädda in en YouTube-video istället för att ladda upp din egen video håller din webbplats lätt, vilket är viktigt för användarupplevelsen och SEO.
• Engagera besökare omedelbart: En rörlig videobakgrund kan fånga uppmärksamheten inom de första sekunderna av ett besök.
• Stick ut från konkurrenterna: Det skapar ett visuellt tilltalande och modernt utseende som skiljer din webbplats från mängden.
• Spara bandbredd och lagringsutrymme: Att hosta videor på WordPress kan förbruka mycket serverresurser och kan kräva extra lagringsutrymme.

På WPBeginner rekommenderar vi starkt att bädda in videor från YouTube istället för att ladda upp dem direkt till WordPress. Detta tillvägagångssätt låter dig visa engagerande innehåll utan att sakta ner din webbplats eller lägga onödig belastning på din hosting-plan.

Med det sagt, låt oss se hur du kan lägga till en YouTube-video som bakgrund i helskärm på din WordPress-webbplats. Vi kommer att visa dig två metoder, och du kan använda dessa snabblänkar för att navigera mellan dem:

• Metod 1: Använd Advanced WordPress Backgrounds för helskärmsvideobakgrund (gratis)
• Metod 2: Använd Thrive Architect för att lägga till en helskärmsvideo bakgrund (rekommenderas)
• Alternativ: Lägg till en animerad bakgrund i WordPress med SeedProd
• Vanliga frågor om videobakgrunder

Metod 1: Använd Advanced WordPress Backgrounds för helskärmsvideobakgrund (gratis)

Om du letar efter ett gratis och enkelt sätt att lägga till videobakgrunder, kan du använda Advanced WordPress Backgrounds.

Det här gratis pluginet lägger till ett Bakgrundsblock som låter dig skapa en helskärmsbakgrund med valfri färg, bild eller video, inklusive YouTube-videor.

Först måste du installera och aktivera pluginet i din WordPress-instrumentpanel. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå helt enkelt till sidan eller inlägget där du vill lägga till en YouTube-video som bakgrund i helskärm. I Gutenberg-blockredigeraren, klicka på knappen ‘+’ för att lägga till ett block.

I popup-fönstret som visas, börja skriva in 'Bakgrund AWB'. När rätt block visas, klicka på det för att lägga till det på sidan.

I menyn till vänster ser du tre flikar för de olika typerna av bakgrunder i full bredd som du kan skapa: Färg, Bild och Video.

Eftersom du vill lägga till en YouTube-video, klicka på fliken ‘Video’. Välj sedan fliken ‘YouTube / Vimeo‘. 

Du kan nu kopiera och klistra in URL:en till YouTube-videofilen som du vill använda på din WordPress-blogg.

Nu kommer WordPress blockredigerare att visa en förhandsgranskning av hur denna bakgrund kommer att se ut.

Advanced WordPress Backgrounds ändrar storleken på videon baserat på innehållet du lägger ovanpå den, så oroa dig inte om videon för närvarande ser lite liten ut.

Som standard är videobakgrunden inaktiverad på mobila enheter.

Om du dock vill visa videobakgrunden på mobila enheter, klicka sedan för att aktivera växlingsknappen 'Aktivera på mobila enheter'.

Tänk bara på att videobakgrunder kan dränera batteritiden och förbruka data för mobila användare.

Direkt ur lådan kommer blocket att spela hela YouTube-videon i autoplay och i en loop. 

Ett annat alternativ är att spela upp en specifik del av videon genom att skriva in exakta tider (i sekunder) i rutorna 'Starttid' och 'Sluttid'.

Du kan också stoppa videon från att spelas i en loop genom att inaktivera 'Loop'-växlingsknappen.

Som standard spelas videon bara upp när besökaren kan se den i sin webbläsare. Detta hjälper till att bibehålla din webbplatsprestanda, så du vill vanligtvis lämna reglaget 'Spela alltid' inaktiverat.

När du först lägger till videon visas den med 100 % opacitet, så den är helt synlig. Dra gärna i reglaget för 'Bildopacitet' för att göra YouTube-bakgrunden mer subtil.  

Om du experimenterar med opacitet, kanske du också vill prova att lägga till en färgad överläggning. 

Klicka helt enkelt för att expandera sektionen 'Överlappande färg' och använd sedan inställningarna för att skapa olika färgade överlägg.

Utforska gärna andra inställningar, som parallaxeffekten och marginaler, för att bakgrunden ska se exakt ut som du vill.

När du är nöjd med hur YouTube-bakgrundsvideon är inställd, är det dags att börja lägga till innehåll som länkar, texter och bilder. 

För att börja, klicka på ikonen '+' i mitten av blocket Bakgrund (AWB).

Detta öppnar ett popup-fönster där du kan välja det block du vill lägga till. Pluginet Advanced WordPress Backgrounds fungerar med alla standard WordPress-block, så du kan lägga till vilket innehåll du vill.

Om du lägger till text ovanpå blocket, se bara till att ändra textfärgen så att den kompletterar videobakgrunden väl.

När du är nöjd med hur det ser ut, klicka bara på knappen 'Uppdatera' eller 'Publicera' för att göra sidan live. Nu, om du besöker din WordPress-webbplats, kommer du att se videobakgrunden i aktion. 

Metod 2: Använd Thrive Architect för att lägga till en helskärmsvideo bakgrund (rekommenderas)

Om du vill anpassa din videobakgrund helt eller enkelt designa kompletta sidor, är den här metoden för dig.

För detta behöver du Thrive Architect.

Efter grundliga tester har vi funnit att det är ett superanvändarvänligt plugin för att bygga sidor. Förutom en videobakgrundsfunktion har det en dra-och-släpp-funktionalitet som är flexibel att använda, så du kan skapa webbplatsen du vill ha utan krångel.

Dessutom levereras det med smarta landningssidmallar som är optimerade för konverteringar, så din landningssida är inställd för framgång från början.

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

Om du vill använda den här metoden, köp först ett Thrive Architect-paket. Det finns att köpa som en fristående produkt eller som en del av Thrive Themes-paketet.

Installera sedan pluginet. Du kan läsa vår guide om hur man installerar ett WordPress-plugin för mer information.

Därefter kan du gå till 'Sidor' från WordPress adminområde och välja en sida att redigera. Håll muspekaren över sidan och välj 'Redigera med Thrive Architect'.

Klicka sedan på '+' -knappen på höger sida av sidan och hitta elementet Bakgrundssektion.

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

Vid det här laget kan du navigera till vänster sida av sidan och skrolla ner till sektionen Bakgrundsstil.

Här, aktivera bara växlingsknappen 'Video bakgrund' och välj 'YouTube' som källa.

Gå sedan till YouTube-videon som du vill använda som bakgrund i helskärm.

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

Klistra sedan in URL:en i lämpligt avsnitt.

Du bör nu se bakgrunden på skärmen.

Även om bakgrunden är tillagd, är den inte helskärm ännu.

För att säkerställa att den är helskärm måste du skrolla upp till sektionen Huvudalternativ. Aktivera sedan alternativen ‘Innehåll täcker hela skärmbredden’, ‘Matcha höjd till skärm’ och ‘Sträck för att passa skärmbredd’.

Låt oss utforska några fler alternativ. För att lägga till innehåll i din bakgrund behöver du bara klicka på '+' -knappen på höger sida igen och dra och släppa ett element.

Du kan lägga till texter, bilder, formulär, knappar, rekommendationer och mer. Thrive Architect har dussintals konverteringsfokuserade element som du kan använda för din webbplats.

Om du tycker att bakgrundsfärgen inte kontrasterar tillräckligt bra med texten, gå helt enkelt tillbaka till inställningarna i bakgrundsavsnittet.

Rulla sedan ner till Bakgrundsstil igen, och i alternativet Lägg till lager, välj en enfärgad färg. Därefter kan du välja en färg att använda som bakgrundsfilter och justera opaciteten som du vill.

När du är klar klickar du bara på 'Verkställ'.

En annan sak du kan justera i inställningarna för bakgrundssektionen är rullningsbeteendet. Du kan välja om det ska vara statiskt, klibbigt eller parallax.

Vi rekommenderar att du bara behåller den statisk så att bakgrunden inte rör sig när användaren scrollar ner. Annars kommer videon att fortsätta spelas upp, vilket kan sakta ner din webbplats.

Nästa sak du kan göra är att gå till avsnittet Responsiv. Här kan du välja om video bakgrunden ska visas på mobil- och surfplattversionerna av din webbplats.

Det är upp till dig, men tänk på att videor tar tid att ladda. Det kan bli irriterande för dina besökare att vänta på att de ska spelas upp när de använder en enhet med liten skärm.

När du är nöjd med YouTube-videobakgrunden i helskärm, klicka bara på knappen 'Spara arbete' för att spara dina ändringar.

Det var allt!

Gå nu till din WordPress-webbplats för att se hur det ser ut live.

Så här ser vår testwebbsida ut.

Alternativ: Lägg till en animerad bakgrund i WordPress med SeedProd

Även om videobakgrunder kan vara visuellt tilltalande, kan de också sakta ner din webbplats laddningshastighet. Om du vill ha ett alternativ kan du lägga till en animerad bakgrund istället.

Det bästa sättet att göra detta är med SeedProd, ett kraftfullt dra-och-släpp-plugin för sidbyggare för WordPress.

Det låter dig enkelt lägga till fantastiska animerade bakgrunder på din webbplats med hjälp av particle.js. Particle.js är ett lättviktigt JavaScript-bibliotek som skapar interaktiva partikelanimationer.

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

Bonustips: Lägg till ett YouTube-videoflöde i WordPress 

Vill du lägga till fler videor på din webbplats? Medan WordPress har inbyggda videoblock för inbäddning, är de inte det mest visuellt tilltalande sättet att visa videor, särskilt om du har flera av dem.

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

Enligt vår mening är det det bästa YouTube-galleripluginet på marknaden som automatiskt visar alla de senaste videorna från din YouTube-kanal, så dina besökare kommer alltid att se det nyaste innehållet.

Skapa helt enkelt ett YouTube-flöde med Smash Balloons enkla redigerare, och lägg sedan till det på vilken sida eller inlägg som helst med antingen kortkod eller pluginets färdiga block.

Du kan också använda Smash Balloon för att bädda in YouTube-spellistor, favoriter och livestreamar på din WordPress-webbplats.

Det bästa med Smash Balloon är att det inte saktar ner din webbplats. Pluginets inbyggda YouTube-cachefunktion ser till att din webbplats alltid laddas snabbt, vilket är bra för SEO.

För mer information kan du se vår steg-för-steg-guide om hur du visar de senaste videorna från en YouTube-kanal i WordPress.

Vanliga frågor om videobakgrunder

Här är några frågor som våra läsare ofta har ställt om att lägga till videobakgrunder i WordPress:

Hur sätter jag en YouTube-video i helskärm?

För att sätta en YouTube-video i helskärm, klicka på helskärmsikonen längst ner till höger i YouTube-spelaren, eller använd kortkommandot f medan videon är aktiv.

Hur lägger man till en videobakgrund i WordPress?

Du kan lägga till en videobakgrund via ett plugin eller en sidbyggare som Thrive Architect. För YouTube-videor rekommenderas inbäddning för att undvika att webbplatsen blir långsam.

Vilken typ av YouTube-videor bör jag välja som bakgrund?

Vi rekommenderar att välja en visuellt engagerande video som är tillräckligt subtil för att inte distrahera från ditt huvudinnehåll. Korta klipp som loopas med mjuka rörelser fungerar ofta bäst.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till en YouTube-video som bakgrund i WordPress. Du kanske också vill kolla in vår guide om hur du skapar en viral väntelista landningssida med WordPress och våra experters val för bästa WordPress-temabyggare.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.