Så här addar du en iframe-ram runt ett videoklipp som du har embeddat

Vill du add to en iframe-ram runt ditt videoklipp som du bäddar in? Senast frågade en användare oss efter ett sätt att add to en kant runt sina videoklipp i WordPress. Eftersom du kan använda både iframe och oEmbed för att add to videos i WordPress, kommer vi att visa dig hur du lägger till en iframe-ram runt en video embed samt hur du lägger till en ram runt oEmbed videos i WordPress.

Tutorial för video

Om du inte gillar videoklippet eller behöver fler instruktioner, fortsätt då att läsa.

Lägga till kant runt iframe videoklipp i WordPress

Det första du behöver göra är att öppna ett post eller en page som innehåller din iframe video embed code. En typisk iframe embed-kod 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>

You can add a border around it by adding inline style to the code like this:

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

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

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

Lägga till kant runt oEmbed videoklipp i WordPress

WordPress kommer med built-in support för oEmbed. I grund och botten tillåter WordPress dig att klistra in länken till videoklippet, och det kommer automatiskt att få embed-koden för dem. Detta fungerar dock endast för oEmbed aktiverade webbplatser som YouTube, Vimeo, DailyMotion, Hulu, etc. (Se: hur man enkelt lägger till videoklipp i WordPress med hjälp av oEmbed)

Nu när du vet hur du lägger till en video med oEmbed, kan du se hur du lägger till en kant runt oEmbed-videoklipp i WordPress.

När du lägger till ett videoklipp med oEmbed, omsluter du helt enkelt URL:en i span tagged med inline style parameters, gillar detta:

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

Om du vill add to samma kant runt alla iframes för videoklipp, ä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 embed-kod 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 tagged runt dina oEmbed video URL:er, gillar detta:

<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 themes senare, kan du enkelt ändra färgerna med ett click jämfört med att gå tillbaka och editera varje videoklipp individuellt.

Vi hoppas att den här artikeln hjälpte dig att add to en iframe-gräns runt en videoklipp embed i WordPress. Du kanske också vill se dessa 9 användbara YouTube-tips för att krydda din WordPress site med videoklipp.

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