Så här lägger du till en iframe-kant runt en videoinbäddning

Så här lägger du till en iframe-kant runt en videoinbäddning / Handledningar

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

Video Tutorial

Prenumerera på WPBeginner

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

Lägga till gränser runt iframe-videor i WordPress

Det första du behöver göra är att öppna ett inlägg eller en sida som innehåller din iframe video-inbäddningskod. En typisk iframe-inbäddad kod ska se ut så här:

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

Ändra bara bredden på gränsen såväl som färgen, och du är klar.

När du lägger till en iframe-gränsverksamhet finns det faktiskt ett bättre sätt att lägga till en ram runt videor i WordPress. Det är med hjälp av oEmbed.

Lägga till gränser runt oEmbed-videor i WordPress

WordPress levereras med inbyggt oEmbed-stöd. I grunden tillåter WordPress dig att klistra in länken på videon, och det kommer automatiskt att få inbäddningskoden för dem. Nu fungerar det bara för oEmbed aktiverade webbplatser 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, så här kan du lägga till en ram runt oEmbed-videor i WordPress.

När du lägger till en video med oEmbed, klistra du bara in webbadressen i span-taggen med inline-stilparametrar, så här:

http://www.youtube.com/watch?v=qzOOy1tWBCg

Om du vill lägga till samma ram runt alla videoframställningar, är det bäst att lägga till en CSS-klass i ditt temas stilark.

 .ramgräns border: 3px solid #EEE;  

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

Du kan också använda samma CSS-klass i spänntaggen runt dina oEmbed-videoadresser, så här:

http://www.youtube.com/watch?v=qzOOy1tWBCg

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

Vi hoppas att den här artikeln hjälpte dig att lägga till en iframe-gräns runt en video som är bäddad i WordPress. Du kanske också vill se dessa 9 användbara YouTube-tips för att krydda ditt WordPress-webbplats med videoklipp.

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