Blogger iFrame Videolarına Resimli Border Ekleme

Blogumuza yazdığımız bir makaleyi düz yazı şeklinde değil de resim, video gibi bir kaç yardımcı etken ile beslemek okuyucularımız için yazımızı sıkılmadan okuma olanağı sağlamaktadır. Yazılarımız içerisine ekleyeceğimiz iFrame kodları ile istediğimiz bir videoyu yazımızın içinde gösterebiliriz. Video paylaşım sitelerinden aldığımız iFrame kodları sitenin kendi belirlediği şekilde yazımızın içine eklenecektir.

Makalelerimizi içerisine eklediğimiz videolarımız klasik görünümde olacağından fazla dikkat çekmeyebilir. Fakat görünümünü biraz değiştirip daha dikkat çekici hale getirmek bizim elimizde. Videolarımıza ekleyeceğimiz border ile video görünümünü kendimize göre özgünleştirebiliriz. Bu sayede daha dikkat çekici videoları yazılarımıza eklemiş ve izlenmesini arttırmış olabiliriz.

iFrame videolarına resimli border (kenarlık) nasıl ekleyebiliriz konusunu ele alırsak oldukça basit bir yol ile videolarımıza border ekleyebiliriz.

Yapmamız gereken ilk şey yazımızın içerisinde olmasını istediğimiz videomuzun Youtube, Vimeo, Dailymotion gibi video paylaşım sitelerinden elde edebileceğimiz iFrame kodunu almak olacaktır. Sonrasında ise Blogger Kontrol Panelinden Yeni Yayın butonuna basarak yeni bir makale girişi yapabileceğimiz yazı editörüne ulaşıyoruz. Yazımızı yazmadan önce ilk olarak editörümüzde bulunan HTML kısmına gelerek aşağıdaki kodları yapıştırıyoruz.

iFrame videolarına resimli border (kenarlık) eklediğimizde nasıl bir görünüm elde edeceğimize yazının sonunda bulunan videoya bakarak görebilirsiniz.

NOT: Videolarımızın en ideal görünüme sahip olabilmesi için aldığımız iFrame kodları arasında bulunan height ve width değerlerini width: 417px ve height: 292px olarak değiştirmeyi unutmayınız.

<style>
#video_image_border {
    width: 425px;
    padding-top: 33px;
    padding-left: 4px;
    height: 335px;
    margin-top: 35px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2SEHIhrVYxQ8VNF7inLFjwsd5CrvnlffsAKT45pVbe2IGKt2JI2_je-PDjlWsdGP7WnjX-0T7wJVi-LUxzKkIxacQ6nTUv0-i15UmfYr_gXBGhXrU_1L6IGosWxR2CI5t8U-q2CplbY/s1600/box.png) no-repeat;
}
</style>

Daha sonra ise yazımızı normal bir şekilde oluştur kısmından yazmaya başlayabiliriz. Yazımızı tamamladıktan sonra videomuzun yazımızın hangi kısmanda görünmesini istiyorsak HTML bölümünden videomuzun bulunmasını istediğimiz yere gelerek aşağıdaki kodları yerleştiriyoruz.

<div id="video_image_border">
<iframe src="//player.vimeo.com/video/61702032?title=0&amp;byline=0&amp;portrait=0" width="417" height="292" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Yukarıdaki kodlarda Kırmızı ile işaretlenmiş yeri video paylaşım sitelerinden aldığınız videonun iFrame kodları ile değiştirin.

Örnek Görüntü