Hur man lägger till en iframe-ram runt en videoinbäddning

Vill du lägga till en iframe-ram runt din videoinbäddning? Nyligen frågade en användare oss om ett sätt att lägga till en ram runt sina videor i WordPress. Eftersom du kan använda både iframe och oEmbed för att lägga till videor i WordPress, kommer vi att visa dig hur du lägger till en iframe-ram runt en videoinbäddning samt hur du lägger till en ram runt oEmbed-videor i WordPress.

Videohandledning

Om du inte gillar videon eller behöver mer instruktioner, fortsätt att läsa.

Lägga till kantlinje runt iframe-videor i WordPress

Första du behöver göra är att öppna ett inlägg eller en sida som innehåller din iframe-videokod. En typisk iframe-inkodningskod bör se ut ungefär så här:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Du kan lägga till en ram runt den genom att lägga till inline-stil i koden så här:

<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Ändra helt enkelt bredden på ramen samt färgen, så är du klar.

Även om det fungerar att lägga till en iframe-ram, finns det faktiskt ett bättre sätt att lägga till en ram runt videor i WordPress. Det är genom att använda oEmbed.

Lägga till kantlinje runt oEmbed-videor i WordPress

WordPress har inbyggt stöd för oEmbed. I grund och botten låter WordPress dig klistra in länken till videon, och den hämtar automatiskt inbäddningskoden för dem. Detta fungerar bara för webbplatser som stöder oEmbed, som YouTube, Vimeo, DailyMotion, Hulu, etc. (Se: hur man enkelt lägger till videor i WordPress med oEmbed)

Nu när du vet hur du lägger till en video med oEmbed, här är hur du kan lägga till en ram runt oEmbed-videor i WordPress.

När du lägger till en video med oEmbed, omslut helt enkelt URL:en i en span-tagg med inline-stilparametrar, så här:

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Om du vill lägga till en liknande ram runt alla video-iframes, är det bäst att lägga till en CSS-klass i ditt temas stylesheet.

.frame-border { 
border:3px solid #EEE; 
}

Nu kan du använda CSS-klassen i din iframe-inbäddningskod så här:

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Du kan också använda samma CSS-klass i span-taggen runt dina oEmbed-video-URL:er, så här:

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Fördelen med att använda en enda CSS-klass är att om du byter tema senare, kan du enkelt ändra färgerna med ett klick istället för att gå tillbaka och redigera varje video individuellt.

Vi hoppas att den här artikeln hjälpte dig att lägga till en iframe-ram runt en videoinbäddning i WordPress. Du kanske också vill se dessa 9 användbara YouTube-tips för att krydda din WordPress-webbplats med videor.

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