Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hur man enkelt embedar iFrame-kod i WordPress (3 metoder)

Vill du embedda iFrame-kod i en WordPress post eller page?

iFrames är ett enkelt sätt att visa videoklipp eller annat content på din site utan att behöva uploada det. Många tredjepartsplattformar som YouTube gillar tillhandahåller iFrame-kod som du helt enkelt kan klistra in på din website.

I den här artikeln visar vi dig hur du enkelt kan embedda iFrame-kod i WordPress.

Easily embedding iFrame code in WordPress

Vad är iFrame?

En iFrame (förkortning för inline frame ) låter dig embed videor eller annat content på din site utan att faktiskt behöva servera videoklippet. Detta kan save dig bandbredd och lagringsutrymme, vilket är anledningen till att du aldrig ska uploada ett videoklipp direkt till WordPress.

Förutom att förbättra din WordPress hastighet och prestanda, kommer iFrame att uppdateras automatiskt om det ursprungliga innehållet ändras. Detta innebär att besökarna alltid ser den senaste versionen av innehållet.

Att embedda upphovsrättsskyddat content via en iFrame bryter inte heller mot upphovsrätten, så det kan hjälpa till att skydda you mot stämningar.

Med detta sagt, låt oss se hur du enkelt kan embedda iFrame-kod i WordPress. Använd bara snabblänkarna för att hoppa direkt till den metod du vill använda:

Metod 1: Embed iFrame med hjälp av källkoden i WordPress (snabbt och enkelt)

Många stora webbhotell för videoklipp har ett ”Embed”-alternativ som ger dig tillgång till iFrame-koden som du behöver add to your site.

Om webbplatsen har några delningsinställningar eller inställningar för ”Embed” är detta ofta det snabbaste och enklaste sättet att embedda content.

De exakta stegen varierar beroende på plattform, men låt oss titta på YouTube som ett exempel. För att embedda YouTube-videor i WordPress klickar du bara på delningsknappen under det videoklipp du vill använda.

Clicking the Share button for your chosen YouTube video

Efter det ser du en popup med olika alternativ för delning.

Det är bara att gå vidare och klicka på knappen ”Embed”.

Clicking the Embed button to get the YouTube embed code

YouTube kommer nu att visa dig iFrame-koden.

Som standard kommer YouTube att kontrollera boxen ”Show player controls”, men vi rekommenderar också att du aktiverar integritetsförstärkt läge. Detta läge allow visitors to watch the embeded content on your WordPress website without it influencing their browsing experience on YouTube.

Efter det, fortsätt och klicka på knappen ”Kopiera”.

Adding a YouTube video to your WordPress website

Nu kan du klistra in den koden i valfritt post eller page på din site. I den här guiden lägger vi till den på en new page i WordPress block editor.

Öppna helt enkelt page och klicka sedan på knappen ”+”. I popupen som visas börjar du skriva ”HTML” för att hitta det customze HTML-blocket.

Adding a custom HTML block in WordPress

När det högra blocket appear, click to add it to your page.

Sedan klistrar du bara in YouTube iFrame-koden i blocket.

Pasting the YouTube HTML code into the iFrame block

Du kan nu publicera din page för att se YouTube videoklippet live på din WordPress blogg.

Metod 2: Embed iFrame med ett WordPress tillägg (fungerar med all website)

Det är ej alla tredjepartswebbplatser som provider en färdig embed-kod. Om du inte kan hitta några ”Delning”- eller ”Embed”-inställningar kan du enkelt skapa din egen iFrame-kod med hjälp av iFrame plugin.

Först måste du installera och aktivera iFrame plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

När du aktiverar pluginet kommer det att börja fungera direkt utan att någon installation behövs. Gå bara till den page eller post där du vill embedda content och add to ett Shortcode block.

Adding a shortcode block in the block editor

Följ detta och add to följande shortcode:

[iframe src="URL goes here"]

Ersätt bara ”URL goes here” med URL:en för det content som du vill embeda på din site.

Som ett exempel kan vi lägga till en Google Maps i WordPress, eftersom detta är ett enkelt sätt för butiker, restauranger och andra platser att lägga till vägbeskrivningar i sitt kontaktformulär.

Tips och råd: Beroende på källan kan du behöva klicka på en ”Dela” eller liknande inställning för att se innehållets direkta, inbäddningsbara URL.

The shortcode to embed a Google map

Efter det är det bara att previewa eller publicera posten.

You should now see the content embed on your website.

An embedded Google Map, on a WordPress website

För att se alla tillgängliga parametrar kan du ta en titt på iFrame plugin-sidan.

Metod 3: Skapa iFrame-koden manuellt i WordPress (inget tillägg obligatoriskt)

Om du inte vill använda ett speciellt plugin för WordPress kan du skapa iFrame-koden manuellt. För att göra detta måste du öppna sidan eller posten och sedan lägga till ett HTML-block i WordPress content editor.

Easily embedding iframe code in WordPress

Först klistrar du in följande kod i ditt HTML block:

<iframe src="URL goes here"></iframe>

Ersätt bara ”URL goes here” med den direkta URL:en för det content som du vill embeda.

Här embeddar vi en Google Maps:

Entering the iFrame code for the Google map

Du kan lägga till extra parametrar för att ändra hur innehållet ser ut på din website. Till exempel ställer vi in bredden till 600 pixlar och höjden till 200 pixlar:

<iframe src="URL goes here" width="600" height="300"></iframe>

Detta är användbart om du behöver visa det embedda innehållet på ett mindre utrymme. Du kanske t.ex. vill resize innehållet efter att ha testat mobilversionen av din website i WordPress.

The Google map on the site with a set height and width

Vad är några iFrame-alternativ?

Det finns vissa nackdelar med att använda iFrames.

Det är inte alla websites som låter dig lägga in deras content i en iFrame, och du kan behöva justera innehållet manuellt så att det ser bra ut i det available utrymmet.

En annan issue är att HTTPS-siter endast kan använda iFrames för content från andra HTTPS-siter. På samma sätt kan HTTP-webbplatser endast använda iFrames för content från andra HTTP-webbplatser.

Det är därför många plattformar gillar WordPress och föredrar oEmbed.

Ofta kan du använda oEmbed för att embedda videoklipp och annat content genom att helt enkelt klistra in en URL i WordPress-posten. WordPress kommer automatiskt att resize oEmbed för att passa det tillgängliga utrymmet, så det kommer alltid att se perfekt ut på skrivbord, smartphones och surfplattor.

Import: WordPress stöder inte längre oEmbed för Facebook- och Instagram-poster som standard. För mer om detta ämne, kontrollera vår fullständiga guide om hur du fixar Facebook- och oEmbed-problemet i WordPress.

Om du vill visa sociala feeds på din website rekommenderar vi att du använder ett plugin för sociala media istället för iFrames.

Smash Balloon gör det till exempel enkelt att embedda content från Facebook, Instagram, Twitter och YouTube.

An example of an Instagram feed, created using Smash Balloon

Här är några tutorials om hur du lägger till flöden för sociala medier med Smash Balloon:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt embedar iFrame-kod i WordPress. Du kanske också vill kontrollera vår guide om hur man tillåter PHP i WordPress inlägg och pages och se våra expertval för de bästa YouTube gallery tillägg för WordPress.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

7 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Aileen Herring

    It was really really helpful

    • WPBeginner Support

      Glad it was helpful :)

      Administratör

  3. M. Faisal.

    thanks for your article of how to easily embed iframe code in wordpress.

    Now i am trying to embed iframe code in wordpress for google map.

    i am success it for solving this problem.

    Thanks and regards.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administratör

  4. Kathleen

    Thanks for this. When embedding a YouTube video, how can I add a title to the iframe for screen readers, for accessibilty purposes?

    • WPBeginner Support

      You would need to check with the support for the iframe you’re trying to embed for title options available.

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.