WordPress gör det enkelt att skapa engagerande multimediasidor genom att automatiskt bädda in tredjepartsinnehåll som YouTube-videor och Tweets.
Men efter att ha arbetat nära med WordPress-användare i över 15 år, har vi lärt oss att oEmbeds också kan orsaka problem. Tänk dig en YouTube-video som svämmar över sin behållare och trycker all din text åt sidan, eller tvingar din call to action-knapp längre ner på skärmen.
Det är där inställningen av en maximal bredd för oEmbeds kommer in. Det låter dig ta kontroll och säkerställa att ditt inbäddade innehåll passar sömlöst med din webbplats design.
I den här artikeln visar vi dig hur du ställer in oEmbed maxbredd i WordPress så att du har fullständig kontroll över din webbplatslayout.
Varför fixa maximal bredd för OEmbed i WordPress?
WordPress stöder oEmbed, vilket gör att du automatiskt kan bädda in innehåll från tredjepartswebbplatser. Du kan till exempel enkelt bädda in YouTube-videor, SlideShare-presentationer, tweets och många andra typer av innehåll.
Detta innehåll är inte hostat på din server, så det kommer inte att sakta ner din webbplats. Du bör särskilt alltid använda tekniker som oEmbed, och aldrig ladda upp en video till WordPress.
Notera: Även om Facebook och Instagram båda stödde oEmbed tidigare, har Meta sedan dess tagit bort stödet för oEmbed. För steg-för-steg-instruktioner om hur du reparerar den här funktionen, se vår guide om hur du fixar Facebook- och Instagram-oEmbed-problemet i WordPress.
WordPress kommer alltid att försöka anpassa bredden på inbäddat innehåll så att det passar perfekt i det tillgängliga utrymmet. Ibland kan dock det inbäddade innehållet vara för brett och överlappa andra innehållsområden på din webbplats.
Tyvärr kan du inte ställa in en maximal bredd för tredjepartsinbäddningar med hjälp av de inbyggda WordPress-verktygen.
Med det sagt, låt oss se hur du kan lägga till den här saknade funktionen och ställa in en maximal oEmbed-bredd i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:
- Metod 1: Använda inbäddningskortkoden (Bäst för YouTube-videor)
- Metod 2: Använda de inbyggda WordPress-inbäddningsblocken (enkelt)
- Metod 3: Använda anpassad PHP (ställ in en maximal bredd för alla inbäddningar)
- Metod 4: Använda CSS (Ställ in maximal bredd för specifika inbäddningstyper)
- Bonustips: Hur du enkelt lägger till dina sociala medieflöden till WordPress
Metod 1: Använda inbäddningskortkoden (Bäst för YouTube-videor)
Du kan ställa in en maximal bredd med hjälp av en kortkod. Den här metoden är enkel, särskilt om du bara vill ställa in den maximala bredden för ett litet antal inlägg. Vi har också funnit att den här metoden fungerar bra för inbäddning av videor i WordPress-blogginlägg.
Dock fungerar inbäddningskortkoden och dess bredd- och höjdparametrar inte för alla oEmbed-leverantörer. Till exempel kan du inte använda den för att ställa in höjden och bredden på en Giphy-inbäddning i WordPress. I det fallet kan du prova en av de andra metoderna som nämns nedan.
Istället för att klistra in URL:en i inläggsredigeraren måste du skapa ett shortcode-block. Du kan sedan lägga till parametrar för bredd och höjd till inbäddningskoden.
Du behöver till exempel bara omsluta följande i inbäddnings-taggar:
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Ändra bara värdena för bredd och höjd för att passa dina egna behov och ersätt URL:en med det innehåll du vill bädda in.
När du är nöjd med sidan, klicka bara på antingen 'Uppdatera' eller 'Publicera'.
Det inbäddade innehållet bör nu passa snyggt in i det tillgängliga utrymmet.
Metod 2: Använda de inbyggda WordPress-inbäddningsblocken (enkelt)
WordPress blockredigerare kommer med flera inbäddningsblock för olika oEmbed-tjänster, såsom block för Twitter, YouTube-livestreams och videor, och SoundCloud-inbäddningar.
Vissa av dessa block låter dig ändra justeringen av inbäddningen och ställa in innehållet till 'Bred bredd' eller 'Full bredd'.
Om du väljer full bredd, kommer inbäddningsblocket och det inbäddade innehållet att uppta hela skärmens bredd. Om du väljer bred bredd, kommer inbäddningsblocket att uppta hela bredden, men innehållet förblir detsamma.
Slutresultatet kan variera beroende på ditt WordPress-tema. Detta är dock en snabb och enkel metod, så det är värt att se om den fungerar för din WordPress-webbplats.
Klicka helt enkelt på knappen ‘Justera’ i den lilla verktygsfältet ovanför blocket. Välj sedan antingen ‘Bred bredd’ eller ‘Full bredd.’
Om detta löser problemet med maximal bredd för inbäddningen kan du fortsätta och publicera sidan. Om du inte är nöjd med hur det ser ut måste du prova en annan metod.
Metod 3: Använda anpassad PHP (ställ in en maximal bredd för alla inbäddningar)
Ibland vill du kanske ställa in en maximal bredd för allt inbäddat innehåll. Det enklaste sättet att göra detta är att lägga till anpassad kod på din WordPress-webbplats.
Problemet med den här metoden är att attributet för maximal bredd bara fungerar om det inbäddade innehållet inte redan har en 'bredd' definierad. Om inbäddningskoden redan innehåller sitt eget 'bredd'-attribut, kanske den här metoden inte fungerar.
Om du inte har redigerat din webbplats kod tidigare, ta en titt på vår guide om hur du enkelt lägger till egna kodavsnitt i WordPress.
Vissa guider ber dig att redigera temafiler manuellt, men detta kan orsaka alla möjliga fel och kan till och med helt bryta din webbplats.
Av den anledningen rekommenderar vi att du använder WPCode. Det gör det enkelt att lägga till kodavsnitt i WordPress utan att behöva redigera dina temafiler. På så sätt kan du uppdatera eller ändra ditt tema utan att förlora alla dina anpassade kodfunktioner.
WPCode kommer också med ett bibliotek av förkonfigurerade kodavsnitt, som inkluderar ett avsnitt för ‘Ange oEmbed maximal bredd’. Detta gör att du kan ange en maximal bredd och höjd för dina oEmbeds.
Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering, navigera till Kodavsnitt » Bibliotek i din WordPress-adminpanel.
Här kan du söka efter 'Set oEmbed Max Width' och föra muspekaren över resultatet med samma namn.
Du kan sedan klicka på 'Använd kodavsnitt'.
WPCode tar dig sedan till sidan 'Redigera kodsnutt', där pluginet redan har konfigurerat allt åt dig.
Här kommer du att märka följande färdiga kodavsnitt:
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
'width' => 400,
'height' => 280,
);
}
add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );
Som standard ställer detta in maximal bredd till '400' och maximal höjd till '280'. Glöm inte att justera höjd- och breddattributen för att passa dina behov.
Klicka slutligen på den 'Inaktiva' reglaget så att det visar 'Aktiv'. Klicka sedan bara på knappen 'Spara kodavsnitt' eller 'Uppdatera' för att göra kodavsnittet live.
Metod 4: Använda CSS (Ställ in maximal bredd för specifika inbäddningstyper)
Som standard lägger WordPress automatiskt till CSS-klasser till olika områden på din webbplats.
Det lägger också till flera CSS-klasser till inbäddade block. Du kan använda dessa CSS-klasser för att ställa in en maximal bredd för inbäddningar på din WordPress-blogg.
Detta är ett bra val om du vill ställa in en maximal storlek för en specifik typ av inbäddning, som till exempel inbäddade Tweets. Det låter dig också skapa en maximal storlek för allt inbäddat innehåll, oavsett typ.
För att ta reda på vilka CSS-klasser du behöver rikta in dig på, bäddar du helt enkelt in innehåll i ett inlägg eller en sida och förhandsgranskar det sedan i din webbläsare.
Håll sedan muspekaren över det inbäddade innehållet och högerklicka. I menyn som visas, välj verktyget 'Inspektera'.
Detta öppnar en ny panel som visar alla CSS-klasser som WordPress har lagt till det inbäddade innehållet. Du kan använda dessa klasser för att ställa in en maximal bredd för den här typen av inbäddning.
För att rikta in dig på en specifik oEmbed-leverantör använder du vanligtvis .wp-block-providername, så leta efter den här klassen i panelen.
Till exempel, i följande bild har vi understrukit klassen .wp-block-embed-providername. På den här raden kan vi också se en .wp-block-embed-pinterest-klass.
Du kan ställa in en maximal bredd endast för Pinterest-inbäddningar med hjälp av klassen .wp-block-embed-pinterest.
Till exempel:
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Var bara medveten om att du kan behöva ersätta .wp-block-embed-pinterest med en annan CSS-klass, beroende på innehållet du vill rikta in dig på.
Om du vill ställa in en maximal bredd för alla inbäddningar kan du använda följande utdrag:
.wp-block-embed {
max-width: 900px!important;
}
Det enklaste sättet att lägga till anpassad CSS på din webbplats är att använda WPCode. Skapa helt enkelt ett nytt anpassat kodavsnitt genom att följa samma process som beskrivs ovan.
Öppna dock denna gång rullgardinsmenyn 'Kodtyp' och välj 'CSS-utdrag'.
Du kan nu spara och publicera detta utdrag på exakt samma sätt som du gör alla WPCode-utdrag live.
Med detta gjort kommer WordPress att använda detta värde som maximal storlek för dina inbäddningar.
Bonustips: Lägg enkelt till dina sociala medieflöden i WordPress
Om du regelbundet bäddar in innehåll från sociala medieplattformar kan du spara mycket tid och ansträngning genom att använda Smash Balloon.
Smash Balloon är det bästa sociala mediepluginet för WordPress och låter dig enkelt lägga till dina sociala medieflöden till en WordPress-webbplats.
Den stöder alla populära inbäddningar från sociala medier, inklusive YouTube, Twitter, Instagram och TikTok-videor.
Ännu viktigare är att Smash Balloon är mobilanpassat och fungerar med alla WordPress-teman, så ditt inbäddade innehåll kommer alltid att se bra ut.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du ställer in en maximal bredd för oEmbeds i WordPress. Du kanske också vill se vår guide om hur man enkelt bäddar in iFrame-kod i WordPress, eller vår expertjämförelse av den bästa livechattprogramvaran för småföretag.
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.
Andreu
Problemet med detta är att det också gör bildernas maximala bredd till den definierade storleken. Vad kan jag göra om jag vill begränsa inbäddningsbredden i redigeraren men inte bildens?
Joe Daniel
Tack. Jag har kämpat med detta i veckor… fungerar för WP 4.0 med Genesis-tema
digg
Hej, det fungerar perfekt för mig.
Men detta påverkar hela webbplatsen, som har olika bredder eftersom det finns sidor i full bredd, med sidofält, eller forum, etc.
Är det möjligt att diskriminera detta så att det bara påverkar bbpress-forumets sidor?
Det kommer att vara mycket användbart, tack!
Ajit Kumar
För alla som inte får detta att fungera eller om Youtube-videor och annat iframe-innehåll inte skalas om, måste du lägga till följande kod i din style.css
/* Se till att inbäddningar och iframes passar sina behållare */
embed,
iframe,
object {
max-width: 100%;
}
Hoppas detta hjälper. Och Syed, tack för det utmärkta inlägget!
Waymond
Tack för att du delade lösningen!
Abhishek Sachan
fungerar inte
Dj
TACK! Det här höll på att driva mig till vansinne.
Anto (@imanto)
Du kan inte använda iframe, object, embed { max-width: 100%; height:auto;} ja, det ger rätt bredd och gör videon responsiv, men det fixar inte höjden när man tittar i webbläsaren.
Finns det faktiskt ett sätt att göra detta? Jag har provat nästan allt, till och med fitvids fungerar inte eftersom du ställer in en px basbredd i funktionerna, men det visar den bredden på mobilen, sedan när du försöker korrigera det med max-width, blir höjden fel även i webbläsaren....
Jag tänker mediafrågor eller något? suck, jag är trött.
Amir
Fungerar perfekt, tack så mycket!
Pierre Dickinson
Hej, tack för tipset, men det fungerar inte, här är vad du behöver i din function.php-fil:
add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // eller vad du vill
$defaults[‘height’]=360; // eller vad du vill
return $defaults;
}
det fungerar utmärkt!
Med vänliga hälsningar,
Filip Kojic
Den här koden fungerar inte bra. Jag sätter in mitt temanamn och temat blir bara block.
Valerie
Osäker på om den andra kommentaren insåg det, men koden har krulliga citattecken och skulle förstöra en webbplats. Ska testa här för att se om kortkodsomslag förhindrar den ändring som förstörde koden...
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
Jag försöker posta en exklusiv animationsfilm från YouTube till min WordPress-blogg. Längst ner på ramen klipps det av i förhandsgranskningen. När spelpilen klickas på försvinner detta problem. Men filmskaparen är med rätta missnöjd med att förhandsgranskningen i inlägget ger intryck av ett fel. Att justera höjd och bredd i inläggets kod fungerar, men löser inte problemet. Idéer?
Colin
Fungerade som en charm – tack!
Ryan Silver
Hej där,
Jag använde din lösning för bredd och det fungerade jättebra. Men hur ställer jag in höjden nu? Är det bara samma if ( ! isset( $content_width ) ) $content_width = 560; men med ordet 'bredd' ersatt med ordet 'höjd'? Jag provade det och det fungerade inte....
Redaktionell personal
Höjden bestäms automatiskt för att matcha 16:9-förhållandet.
Admin
FIlip Kojic
Det ser ut som 16:10. Här är ett exempel:
How can I change height. Please someone answer.
Jasmine Ham
utmärkt, det fungerar! men vad händer om jag behöver att det ska vara responsivt?
några idéer för att göra det?
josef
hej,
finns det ett sätt att tvinga alla iframes på webbplatsen att vara 100% bredd. inte bara youtube
jag har cirka 300 iframes och alla fast storlek så... tack på förhand
Josef
josef
hej,
finns det ett sätt att tvinga alla iframes på webbplatsen att vara 100% bredd. inte bara youtube
jag har cirka 300 iframes och alla fast storlek så...
Ryan
Jag lade till den här koden i min functions.php men det gjorde ingen skillnad, och jag antar att det beror på att mitt tema inte definierar $content_width.
Jag ser länken till codex om att definiera det, men jag är inte utvecklare och har ingen i beredskap; hur lägger man till en $content_width-definition till ett tema? Var placerar man den? Tack!
Justin Germino
Detta fungerade perfekt, finns det något sätt att tvinga och ställa in videon som standard till HD-kvalitet istället för SD-kvalitet som verkar vara standard även om jag i mina YouTube-inställningar har angett att den ska vara som standard HD?
Redaktionell personal
Vad är din maximala bredd? Jag har läst tidigare att Youtube justerar kvaliteten baserat på bredden på iframen.
Admin
Grant Norwood
Observera att variabeln $content_width måste deklareras som global innan den här korrigeringen fungerar.
Nigel Parry
WP verkar uppdateras av personer som är oklara om internets centrala roll för multimedia. Varför denna grundläggande preferens skulle kräva kodintervention vet jag inte. WP kunde uppenbarligen inte se hur breda mina kolumner var. Hur som helst, allt är fixat nu. Ni är bäst.
Redaktionell personal
Tja Nigel, det är mer än så. De försöker göra WordPress enklare att använda för "användare". Med tiden har WordPress lagt till ett alternativ efter ett annat. Detta blir riktigt skrämmande för nya användare. Därför går de vägen med beslut istället för alternativ. Hoppet med denna oEmbed maxbredd är att varje temadesigner ska/kommer att definiera det i sina teman, så att slutanvändaren inte behöver oroa sig för det.
Admin
Alex Leonard
Tack! Jag var lite förbryllad över var inställningen för medieinbäddning hade tagit vägen!
Azad
Hej
Tack för ditt inlägg.
Men jag får inte till det här, jag skrev det andra inlägget du nämnde i kommentarerna. Men jag får det fortfarande inte att fungera, jag skrev detta:
I början av min functions.php, men då slutade hela min webbplats att fungera. allt blev vitt, jag var tvungen att redigera filen via ftp för att få den att fungera igen.
Vad gör jag fel?
Tack!
Azad
Hey
I got it working, thanks!
Monica
Hej, var i functions.php-filen ska den här koden placeras?
Redaktionell personal
Du kan klistra in den i början eller slutet så länge den är oberoende av andra funktioner. Här är en artikel om det:
https://014.leahstevensyj.workers.dev/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Admin
Jesse Garnier
Vilket värde skulle vara lämpligt för $content_width för en design med variabel bredd eller responsiv design?
Redaktionell personal
För responsiv design vill du förmodligen använda fitvid.js eller något liknande för att ändra storlek på dina videor.
Admin
Paul Lumsdaine
Jag lyckades på något sätt få responsiviteten att fungera genom att sätta max-width: 100% på mina iframes i CSS. Höjden ställs naturligtvis in automatiskt beroende på din innehållsbredd, men detta bör åtminstone få det att fungera korrekt utan att använda någon extra js. Fitvid är vägen att gå, men detta fungerade för mig.
Jeremy Myers
Paul,
Kan du inkludera CSS som du använde för att ställa in din iframe-bredd till 100 %?
Roman
Jag använder denna CSS-kod för responsiv design:
iframe, object, embed { max-width: 100%; } (om du vill kan du lägga till -> height: auto)
Tevya
Tyvärr fungerar Romans CSS antingen inte på vissa teman eller så fungerar det inte med den nya WP 3.6 medieuppspelaren som är inbyggd i kärnan. Jag provade det precis och ingenting hände. Jag försöker få ett tema som är responsivt att även hålla den nya WP 3.6 spelaren responsiv, men ingen lycka hittills. 2012-temat verkar hantera det väldigt bra, men jag kan inte lista ut vad de gör annorlunda än det tema jag arbetar med.
Melanie
Jag är nybörjare på WP & kodning, med det sagt är jag inte säker på var jag ska placera koden "if ( ! isset( $content_width ) ) $content_width = 600;" Jag gick till filen function.php i mitt Suffusion-tema och är inte säker på exakt var jag ska infoga den här koden. Jag försökte på ett antal ställen där det stod videoattachment och det fungerar inte. I mitt fall är de inbäddade videorna nu för stora för mitt tema sedan uppgraderingen till WP 3.5.
Redaktionell personal
Ändra siffran 600 för att matcha din temas storlek. Om den är för stor för ditt tema, gör den mindre.
Admin
Jessi Linh
Den har släppts vid rätt tidpunkt!!! Namnet "Elvin" är också så speciellt.
Tack för ditt inlägg.
Edward Caissie
Detta är en del av anledningen till att ange ett lämpligt $content_width-värde är ett krav enligt riktlinjerna för WordPress-temagranskning (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Redaktionell personal
Japp, helt enig med dig där. Endast dåligt kodade teman kommer inte att ha det. Men det finns många sådana där ute. Ett tema som en av våra kunder använde saknade den biten. Sammantaget är det ett bra tema.
Admin
Devin
Perfekt tajming. Tack!