Så här skapar du ett galleri med videoklipp i WordPress (steg för steg)

Vill du skapa ett galleri med videoklipp i WordPress?

Som standard låter WordPress dig embedda videoklipp i dina posts och pages. Om du lägger till många videoklipp kommer det dock att sakta ner din website och ta upp mycket utrymme på ditt webbhotell server.

I den här artikeln visar vi dig hur du enkelt skapar ett professionellt galleri för YouTube videoklipp som inte påverkar din websites prestanda.

Varför skapa ett galleri med videoklipp i WordPress?

Folk älskar att titta på videoklipp. Faktum är att enligt vår ultimata lista över bloggstatistik får inlägg med videoklipp också 83% mer trafik än de utan videoklipp.

Om du run en online store, så kan videoklipp till och med ge dig mer försäljning. Enligt experter har 88% av alla människor köpt en produkt eller tjänst efter att ha tittat på ett videoklipp.

Som standard låter WordPress dig add videos till posts, pages och widget-klara areas som sidebar. Det är dock svårt att skapa en snygg gallery layout med hjälp av de built-in WordPress block och tools.

WordPress är inte heller optimerat för att servera och spela upp videoklipp. Att uppladda många videoklipp till din website innebär ofta längre laddningstider och en dålig upplevelse för besökarna, så du bör aldrig uppladda videoklipp direkt i WordPress.

Istället rekommenderar vi att du använder ett webbhotell för videoklipp som gillar YouTube. När du har en YouTube-kanal kan du embeda alla dina videoklipp i WordPress utan att påverka din websites prestanda.

Med detta sagt, låt oss se hur du kan skapa ett videoklipp gallery i WordPress.

Så här installerar du ett tillägg för videoklipp

Det enklaste sättet att add to ett YouTube video gallery till din WordPress-webbplats är genom att använda Smash Balloon YouTube Feed plugin. Det är det bästa pluginet för YouTube video gallery för WordPress, som används av över 1,6 miljoner websites.

Note: Det finns ett YouTube Feed Free Plugin som allow you att visa de senaste videoklippen från din YouTube-kanal i WordPress. Vi kommer dock att använda Pro-versionen eftersom den tillåter dig att embedda YouTube playlists, favoriter, live streams och mer.

Om du redan har en YouTube-kanal kan du enkelt bädda in alla dina videoklipp i WordPress. Om du inte har någon kanal måste du skapa en och uploada alla videoklipp som du vill embedda på din website i WordPress.

Efter det är du redo att installera och aktivera plugin-programmet Smash Balloon YouTube Feed. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, gå till YouTube Feed ” Settings och enter din license key i fältet ’License Key’.

Du hittar den här informationen under your account på Smash Balloons website.

När du har enter nyckeln klickar du på knappen ”Activate”.

Så här ansluter du din website i WordPress till YouTube

När pluginet är aktivt kan du gå vidare och ansluta det till din YouTube-kanal. På YouTube Feed ”Settings” -vyn väljer du knappen ”Add Source”.

På nästa vy, fortsätt och klicka på ”Anslut till YouTube via Google. Smash Balloon kommer nu att visa alla dina Google-konton.

You can either choose an account from the list or click on ”Use another account”.

Efter det kommer du att se en varning om att Smash Balloon kommer att ha tillgång till din YouTube-kanal.

Om du vill fortsätta klickar du på knappen ”Fortsätt”.

Smash Balloon kommer nu att be om ID:n eller användarnamnet för din YouTube-kanal.

För att få denna information, gå till YouTube-webbplatsen och klicka sedan på din profilbild i det övre högra hörnet. Därefter väljer du ”Your channel”.

Titta nu på adressfältet. Om du ser lite text efter ”användare/” är detta ditt användarnamn för YouTube-kanalen.

Om du ser ”channel/” och sedan en string med siffror och bokstäver är detta kanalens ID:n.

Kopiera bara värdet och växla tillbaka till din WordPress dashboard.

Här klistrar du in informationen i fältet som visar ”Enter Channel ID:n or Username” som standard. När du är klar klickar du på ”Nästa”.

Skapa en API Key för YouTube

Vid denna punkt kommer du att se följande message: No API Key Entered.

För att undvika eventuella störningar rekommenderar vi också att du skapar en YouTube API key och lägger till den i pluginets inställningar.

Gå till Google Console i en new tab och logga in med ditt Google account.

När du är inloggad i konsolen klickar du på dropdown-menyn i toolbaren. Som standard visas namnet på ditt senaste Google Console-projekt, så du kanske ser en annan text.

Om det här är första gången du loggar in på Google Cloud Console måste du godkänna villkoren när du uppmanas att göra det.

När du har gjort det klickar du på ”New Project”.

You kan nu skriva in ett namn för projektet. Detta är bara för din referens, så du kan använda vad du vill. Därefter klickar du på ”Create”.

I toolbaren klickar du på ikonen ”Search” och skriver sedan in ”YouTube Data API”. Under ”Marketplace” hittar du YouTube Data API och ger det ett klick.

Detta tar dig till en vy där du kan aktivera YouTube API key.

För att göra detta klickar du på knappen ”Aktivera”.

I menyn till vänster väljer du ”Credentials”.

Klicka sedan på ”Create Credentials”.

I dropdown-menyn som visas klickar du på ”API key”.

Efter några ögonblick kommer du att se ett ”API key created” message. Du måste add to denna information till Smash Balloon plugin, så obs/observera det.

Alla API keys är obegränsade som standard. För att hindra andra personer från att använda nyckeln utan din behörighet är det en bra idé att begränsa den genom att clicka på länken ”Edit API Key”.

Detta öppnar en vy som visar alla dina nycklar. Klicka bara på YouTube-nyckeln som vi just skapade.

Obs/observera: Om du av misstag closeade popupen, så var inte orolig. Du kan nå samma vy genom att välja ”Credentials” från menyn till vänster. På samma sätt, om du inte registrerade API key, klicka bara på ”Show Key” för att se dina credentials.

Under ”Ange en begränsning för ett program” select the ”Websites” alternative.

Under ”Website Restrictions” klickar du på ”Add”.

Nu kan du skriva in adressen till din WordPress website och klicka på ”Done”.

För att Feeds for YouTube ska få tillgång till API:et måste du också skriva in www.googleapis.com och sedan clicka på ”Done”.

Under ”API restrictions” klickar du på alternativknappen bredvid ”Restrict key”.

När du har gjort det klickar du på dropdown-menyn ”Select APIs” och kontrollerar boxen bredvid ”YouTube Data API”.

Därefter klickar du på ”OK”.

När du är nöjd med hur API key är konfigurerad klickar du på knappen ”Save”.

Du är nu redo att add to API key till din WordPress website. Byt tillbaka till WordPress dashboard och gå till YouTube Feed ” Settings.

Här klistrar du in nyckeln i fältet ”API Key” och klickar sedan på ”Add”.

Så här skapar du ett galleri med videoklipp i WordPress

Nu när du har anslutit WordPress och YouTube är det enkelt att visa de senaste videoklippen från din YouTube-kanal i WordPress.

Gå bara till YouTube Feed ” Alla Feeds och klicka sedan på ’Add New’.

Med Smash Balloon YouTube Feed Pro kan du embedda alla olika typer av YouTube-content, inklusive playlists, live streams och enskilda videor.

Du kan till och med skapa en social wall genom att kombinera posts från flera sociala plattformar. Du kan till exempel embeda inläggsstatusar från Facebook, visa tweets, visa Instagram-foton och visa videoklipp från YouTube, allt i ett och samma gallery.

För att skapa ett YouTube gallery, välj ”Channel” och klicka sedan på ”Next”.

Nästa uppgift är att välja den template som du vill använda som utgångspunkt för ditt YouTube video feed. Alla templates är helt anpassningsbara, så du kan finjustera designen beroende på hur du vill att galleriet ska se ut.

Om du vill skapa ett galleri med videoklipp väljer du templaten ”Gallery” och klickar sedan på ”Next”.

Smash Balloon kommer nu att gå vidare och skapa ett YouTube gallery. Det här är en bra början, men du kanske vill finjustera hur videoklippen ser ut på din blogg eller website i WordPress.

Så här customize du ditt YouTube Gallery

Varje gång du skapar ett nytt feed tar Smash Balloon dig automatiskt till Editorn. Här ser du en preview av galleriet till höger och några inställningar till vänster.

De flesta av dessa alternativ är självförklarande, men vi ska snabbt gå igenom några viktiga areas.

Om du inte är nöjd med hur feeden ser ut kan du prova en annan template genom att clicka på alternativet ”Template” i menyn.

Välj sedan knappen ”Change”.

Detta öppnar en popup som visar alla de olika templates du kan använda.

Klicka bara på den template du vill använda och klicka sedan på ”Update”.

Därefter klickar du på länken ”Customize”.

Detta tar dig tillbaka till huvudvyn för inställningar för Smash Balloon.

Därefter kan du ändra hur dina videoklipp visas genom att clicka på ”Feed Layout”.

På den här vyn kan du växla mellan layouterna grid, gallery, list och carousel.

Beroende på vilken layout du väljer kan du få tillgång till några extra inställningar.

Om du till exempel väljer ”List” kan du ändra antalet videoklipp som Smash Balloon visar och skapa mer utrymme mellan YouTube-videorna.

När du gör ändringar uppdateras preview automatiskt, så att du kan prova olika settings för att se vad som ser bäst ut för ditt videoklipp gallery.

Statistik från social media visar att 90 % av konsumenterna tittar på videoklipp på sina mobila enheter och 70 % av alla som besöker YouTube gör det med en smartphone eller surfplatta. Med detta i åtanke vill du se till att videoklippen i galleriet ser lika bra ut på mobilen som på datorn.

You can preview how your feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

När du har testat mobilversionen av din WordPress website kanske du vill ändra antalet videoklipp som du visar på smartphones och surfplattor. Detta kan hjälpa your gallery att passa bekvämt på mindre vyer på surfplattor och smartphones.

Om du använder layouten Gallery visar Smash Balloon redan olika antal columns på mobila enheter och stationära datorer.

Om du vill ändra standardinställningarna skriver du bara in nya siffror i sectionen ”Columns”.

När du är nöjd med ändringarna klickar du på ”Customize” för att återgå till huvudvyn för inställningar för Smash Balloon.

Du är nu redo att utforska nästa alternativ, som är ”Färgschema”.

Som standard använder Smash Balloon samma färgschema som ditt WordPress theme. Du kan dock byta till ett ”Light” eller ”Dark” färgschema om du föredrar det.

Du kan till och med skapa ditt eget färgschema genom att välja ”Customize” och sedan använda inställningarna för att ändra färgen på links, textfärgen, ändra bakgrundsfärgen med mera.

Därefter kanske du vill add to en header ovanför videogalleriet. Denna header visar din YouTube profil och kanalnamn, så att besökarna kan se exakt var innehållet kommer ifrån.

För att add to en header section, click på ”Header” i menyn till vänster.

På den här vyn klickar du på slidern ”Aktivera” för att ändra den från grå till blå.

När du har lagt till en header section kan du använda kontrollerna för att växla mellan standard och text header styles.

Om du väljer ”Text” kan du ändra textfärg och storlek på fonten. Som standard visar denna header meddelandet ”We are on YouTube”. You can replace this with your own message by typing it into the ’Text’ box.

När du är nöjd med hur headern ser ut, är nästa vy för inställningar ”Videoklipp”.

Detta tar dig till en ny vy där du kan finjustera hur varje videoklipp ser ut som standard, när en visitor hoverar över det och när det spelas. Låt oss titta på varje alternativ i tur och ordning.

I ”Video Style” kan you växla mellan boxad och vanlig layouts.

Om du väljer ”Boxed” kan du ändra bakgrundsfärg, add to en box shadow eller öka border-radius för att skapa böjda hörn.

Du kan också välja om videoklippen ska visas i en horisontell eller vertikal layout.

När du är nöjd med dina ändringar klickar du på länken ”Videos”. Detta tar dig tillbaka till föregående vy, där du kan selecta ”Edit Individual Elements”.

Här kan du add to och remove olika element från varje videoklipp.

Du kan till exempel customize rubriken, description och datumet för videoklippet.

Du kan också ändra färg och storlek på ett enskilt YouTube-element genom att clicka på elementets namn.

Vissa element har extra Settings. Om du t.ex. väljer ”Description” kan du ställa in det maximala antalet tecken som Smash Balloon ska visa.

När du är slutförd kan du gå vidare till inställningarna för ”Hover State”.

Här kan du ändra det content som visas när besökarna hoverar musen över ett videoklipp.

När en visitor clickar på ett videoklipp börjar det spelas upp i en embed videospelare. Du kan ändra hur spelaren fungerar och ser ut genom att clicka på ”Video Player Experience”.

Här kan du ändra spelarens bildförhållande och välja om videoklippet ska börja spelas automatiskt eller vänta tills besökaren klickar på play-knappen.

Om du väljer ”Call-to-action” kan du ändra vad som händer när videoklippet är slutfört eller när besökaren pausar uppspelningen.

Som standard försöker Smash Balloon att få mer engagement på din YouTube-kanal genom att visa related videos. Du kanske vill visa en customize-länk istället. Om du till exempel run en WooCommerce store kan du länka till dina mest populära WooCommerce-produkter.

När du är nöjd med din Player kan du clicka på ”Customize” för att återgå till huvudvyn för Smash Balloon editor.

Därefter väljer du alternativet ”Load More Button” i menyn till vänster.

Knappen ”Ladda mer” ger besökarna ett enkelt sätt att rulla igenom fler av dina videoklipp. Detta kan ge dig mer engagement på YouTube och få besökarna att stanna kvar längre på din website.

Med detta sagt kanske du vill få knappen att sticka ut genom att ändra bakgrundsfärg, hover-tillstånd och textfärg.

Den här knappen visar ”Load More…” som standard, men you kan add to ett custom message genom att skriva i fältet ”Text”.

Som standard visar Smash Balloon en knapp ”Prenumerera ” under ditt videoklipps gallery.

Den här knappen gör det lättare för visitorerna att gå med i din YouTube-kanal, så du kanske vill customize den genom att välja ”Subscribe Button” från Smash Balloon huvudinställnings vy.

På den här vyn kan du ändra bakgrundsfärg, hovering och textfärg för knappen.

Du kan också ersätta ”Prenumerera” med ditt eget meddelande genom att skriva i boxen ”Text”.

När du är nöjd med hur videoklippet ser ut i galleriet, glöm inte att clicka på ”Save” för att store dina ändringar. Du är nu redo att add to galleriet till din website.

Så här embedar du ett videoklipp i WordPress

Du kan add your YouTube gallery till WordPress med hjälp av ett block, widget eller shortcode.

Om du har skapat mer än ett feed med Smash Balloon behöver du veta koden för galleriet om du ska add to det med ett block eller widget.

För att få koden, gå till YouTube Feed ” Alla feeds och kopiera sedan texten under ’Shortcode’.

I följade exempel behöver vi använda youtube-feed feed=2.

Om du vill embeda ditt video gallery på en page eller post rekommenderar vi att du använder blocket ”Feeds for YouTube”.

För att börja, öppna sidan eller posten där du vill bädda in YouTube videoklipp gallery. Klicka sedan på ikonen ”+” för att lägga till ett nytt block och börja skriva ”Feeds for YouTube”.

När rätt block visas klickar du på det för att add to the post or page.

Blocket kommer att visa ett av dina Smash Balloon feeds som standard. Om du vill använda ett annat feed istället, hittar du helt enkelt ”Shortcode Settings” i menyn till höger.

Du kan nu add shortcode till denna box. När du har gjort det klickar du på knappen ”Tillämpa ändringar”.

Blocket kommer nu att visa alla videoklipp från din YouTube-kanal. Publicera eller update helt enkelt sidan för att göra din YouTube social media feed live.

Ett annat alternativ är att add the feed to any widget-ready area, such as the sidebar or similar section. This allows you to show the gallery across entire your website.

För att göra detta, heada bara över till appearance ” Widgets i WordPress dashboard och klicka sedan på den blå ”+” -knappen.

Börja nu skriva ”Feeds for YouTube” i sökfältet för att hitta rätt widget.

Därefter drar du den helt enkelt till det area där du vill visa videoklippet gallery.

Som standard kommer widgeten att visa ett av de flöden du skapade med YouTube Feed Pro plugin. För att visa ett annat feed istället, skriv in feedens kod i boxen ”Shortcode Settings” och klicka sedan på ”Tillämpa Changes”.

You can now click on the ”Update” button to make widgetar live.

Mer information finns i vår Step-by-Step guide om hur du lägger till och använder widgetar.

Du kan också embeda your videoklipp gallery på en page, post eller widget-ready area med hjälp av en shortcode. För att få kortkoden, gå helt enkelt till YouTube Feed ” Alla Feeds och kopiera värdet i kolumnen ”Shortcode”.

Sedan är det bara att add to denna kod till din site. För mer information, vänligen se vår detaljerade guide om hur du lägger till en shortcode i WordPress.

Slutligen, om du använder ett block aktiverat tema, kan du använda hela webbplatsen editor för att add to Feeds for YouTube block var som helst på din site.

I WordPress dashboard går du helt enkelt till Appearance ” Editor.

Som standard kommer hela Site Editor att visa ditt temas hemmamall.

Om du vill add to YouTube video gallery till en annan template, click on ”Templates” in the left-hand menu.

I Editorn visas nu en lista över alla templates som ingår i ditt WordPress Theme.

Gå vidare och klicka på den template du vill edit.

WordPress kommer nu att visa en preview av templates.

Om du vill add to gallery till den här delen av din site, click on the pencil icon.

När du har valt din template, hoverar du med musen över det area där du vill visa YouTube videoklipp.

Klicka sedan på det blå ”+” när det dyker upp.

När du har gjort det, börja skriva ”Feeds for YouTube”.

When the right block appears, click to add it to your template.

Som alltid kommer Smash Balloon att visa en feed som standard. Om detta inte är det YouTube-galleri du vill använda, kan du add to galleriets shortcode genom att följa exakt samma process som beskrivs ovan.

Konvertera ditt videogalleri till WordPress Posts

Hittills har vi sett hur Smash Balloon låter dig skapa ett videogalleri och customize det så att det passar perfekt med resten av din webbplats. Detta plugin har också några fler funktioner som du kanske vill utforska, inklusive att förvandla videoklippen i ditt gallery till WordPress-poster.

Med tillägget kan du snabbt och enkelt skapa en post med hjälp av ett videoklipp från din YouTube-kanal. Du kan sedan lägga till annat content till den posten med hjälp av den välbekanta WordPress dashpanelen och tools.

När du publicerar posten kommer Smash Balloon att visa videoklippet högst upp på vyn, tillsammans med viss information som dess titel och datumet då det publicerades.

Allt annat content kommer att visas under videoklippet.

Detta är mycket snabbare än att embedda varje videoklipp i ett blogginlägg manuellt. Det är också ett enkelt sätt att dela enskilda videoklipp. Du kan till exempel leda människor till en viss post genom att främja den på social media eller lägga till den i ditt nyhetsbrev.

Din första uppgift är att välja den information som kommer att visas under varje video genom att gå till YouTube Feed ” Settings.

Här väljer du tabben Single Videos.

Kontrollera bara boxen bredvid varje information som du vill visa.

Glöm inte att clicka på ”Save Changes” för att store dina inställningar.

Därefter går du till YouTube Feed ” Enstaka videoklipp. Här ser du alla YouTube-kanaler som du har anslutit till WordPress med Smash Balloon.

Hitta bara den kanal du vill använda och klicka på dess namn.

Du kommer nu att se alla videoklipp från den här kanalen.

Hitta bara det videoklipp som du vill göra om till ett post och klicka på länken ”Edit”.

Du kan nu add to block, text och annat content till posten med hjälp av WordPress standard content editor.

När du är redo att göra posten och videoklippet live klickar du helt enkelt på knappen ”Publicera” som vanligt. Om du nu besöker din website kommer du att se det nya videoklippet.

Related to: Om du vill skapa ett TikTok Feeds Pro gallery på din WordPress site, erbjuder Smash Balloon också ett TikTok Feeds Pro plugin. För steg-för-steg-instruktioner, se vår guide om hur man embedar TikTok videoklipp i WordPress.

Vi hoppas att den här artikeln hjälpte dig att skapa ett videoklipp gallery i WordPress. Du kanske också vill kontrollera vår guide om hur du snabbar upp din WordPress website och vårt expertval av de bästa tilläggen för sociala media.

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.