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.
Syed Balkhi says
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!
Nicola says
There seems to be extra space at the bottom so it doesn’t fit exactly, how can I fix this please.
thanks
WPBeginner Support says
If you’ve set the width and height you would likely need to change the height based on the dimensions of your video.
Administratör
Thomas says
The frame covers the video controls, how do i stop this happening? Cheers.
tom says
I have got the border but can’t change the colour? How do I do this?
eric greenspan says
Change the hex number Tom. For Dodger blue use: #1E90FF in place of #EEE. You can find hex colors here.