Video Gömme Etrafına iframe Kenarlığı Ekleme

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.