Video yerleştirmenizin etrafına bir iframe kenarlığı mı eklemek istiyorsunuz? Geçenlerde bir kullanıcı bizden WordPress’te videolarının etrafına bir kenarlık eklemenin bir yolunu sordu. WordPress’te video eklemek için hem iframe hem de oEmbed kullanabileceğiniz için, size bir video gömme etrafına nasıl iframe kenarlığı ekleyeceğinizi ve WordPress’te oEmbed videolarının etrafına nasıl kenarlık ekleyeceğinizi göstereceğiz.
Video Eğitimi
Videoyu beğenmediyseniz veya daha fazla talimata ihtiyacınız varsa, okumaya devam edin.
WordPress’te iframe Videoların Etrafına Kenarlık Ekleme
Yapmanız gereken ilk şey, iframe video gömme kodunuzu içeren bir gönderi veya sayfa açmaktır. Tipik bir iframe gömme kodu aşağıdaki gibi görünmelidir:
<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>
Koda aşağıdaki gibi satır içi stil ekleyerek etrafına bir kenarlık ekleyebilirsiniz:
<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>
Sadece kenarlığın genişliğini ve rengini değiştirin ve işiniz bitsin.
Bir iframe kenarlığı eklemek işe yarasa da, WordPress’te videoların etrafına kenarlık eklemenin aslında daha iyi bir yolu var. Bu da oEmbed kullanmaktır.
WordPress’te oEmbed Videoların Etrafına Kenarlık Ekleme
WordPress yerleşik oEmbed desteği ile birlikte gelir. Temel olarak WordPress, videonun bağlantısını yapıştırmanıza izin verir ve otomatik olarak onlar için gömme kodunu alır. Bu yalnızca YouTube, Vimeo, DailyMotion, Hulu vb. gibi oEmbed özellikli siteler için geçerlidir (Bkz: oEmbed kullanarak WordPress’e nasıl kolayca video eklenir)
Artık oEmbed ile nasıl video ekleyeceğinizi bildiğinize göre, WordPress’te oEmbed videolarının etrafına nasıl kenarlık ekleyebileceğiniz aşağıda açıklanmıştır.
oEmbed kullanarak bir video eklerken, URL’yi satır içi stil parametreleriyle birlikte span etiketine sarmanız yeterlidir:
<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
Tüm video iframe’lerinin etrafına aynı kenarlığı eklemek istiyorsanız, temanızın stil sayfasına bir CSS sınıfı eklemeniz en iyisi olacaktır.
.frame-border { border:3px solid #EEE; }
Artık CSS sınıfını iframe gömme kodunuzda aşağıdaki gibi kullanabilirsiniz:
<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>
Aynı CSS sınıfını oEmbed video URL’lerinizin etrafındaki span etiketinde de kullanabilirsiniz, bunun gibi:
<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
Tek bir CSS sınıfı kullanmanın avantajı, daha sonra temaları değiştirirseniz, geri dönüp her videoyu ayrı ayrı düzenlemek yerine renkleri tek bir tıklamayla kolayca değiştirebilmenizdir.
Umarız bu makale WordPress’te bir video yerleştirmenin etrafına iframe kenarlığı eklemenize yardımcı olmuştur. WordPress sitenizi videolarla renklendirmek için bu 9 faydalı YouTube ipucunu da görmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.
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.
Yönetici
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.