Resmin İçine (Üstüne) Video Eklemek

Resmin içine video eklemek konusu belki çok aranan bir konu olmayabilir ancak yazdığım içeriklerde ya da oluşturduğum sayfalarda görsel açıdan oldukça ilgi çekici olduğu için bu makalem aracılığı ile nasıl yapıldığını paylaşmak istedim. Yapılması gereken şey oldukça basit aslında ama temelden hiç bir bilgisi olmayanların daha anlayabilmesi için detaylı bir anlatım yapacağım. 

Dilerseniz öncelikle nasıl bir yapıdan bahsettiğimi bir örnekle gösterelim. Ben herhangi bir içerikte video paylaşacağım zaman, bu paylaşımı laptop bilgisayar ya da televizyon içerisinde kullanıcılara göstermeyi seviyorum. Hem dikkat çekiyor hem de kullanıcılar tarafından daha çok tıklamaya sahip oluyor. Biliyorsunuz ki Youtube’dan ve benzeri sitelerden iframe ile alınan videoları direk olarak sayfada paylaşmak kötü bir görüntüye sahip oluyor. Lafı uzatmadan örneğimizi verelim ve nasıl yapıldığını anlatmaya başlayalım.

İlk yapmanız gereken bir div alanı açmaktır. Bu alanı açtıktan sonra backgorund resminiz ne ise onu belirlemeniz gerekecektir. Ben bu örnekte estetik açıdan iyi görünebilmesi için bir laptop resmi buldum. Ardından bu laptop resminin içerisinde koyacağınız videonun iframe kodunu almanız gerekecektir. Örnekte görüldüğü gibi ben Youtube’a eklediğim bir videonun iframe kodunu aldım. Yani bizlere lazım olacak olan şeyler bir adet backgorund resmi ve bu resmin içerisinde koyacağımız bir adet iframe kodudur. Bu hazırlıkları yaptıktan sonra resmi içine video eklemek için gerekli kodumuzu yazmaya başlayabiliriz.

Resim İçine Video Eklemek

Resim içine video ekleyebilmek için CSS bilgisine sahip olmanız gerekir. Ancak ben hiç css bilmiyorum deseniz bile yukarıdaki gibi bir görüntüyü bu makale sayesinde elde edebilecek bilgiye sahip olabilirsiniz. Şimdi dilerseniz kullanmanız gereken kodu genel itibari ile başlayalım ve her değerin ne işe yaradığını anlatalım.

Yukarıdaki resim içine video eklenmiş alanı oluşturabilmek için kullanılan kod;

İlk yapmanız gereken şey backgorund resminizin uzantısını belirlemektir. Ben ana dizinimde bulunan images dosyasının içerisine attığım için background: url(‘/images/video-bg.jpg’) kodunu paylaştım. Örnek olarak eğer siz direk ana dizine atıyorsanız resminini background: url(‘/resminizinuzantisi.jpg’) şeklinde yapmanız gerekir. Daha sonra resim içeriside videoyu koyacağınız alanı tespit etmeniz gerekecektir. Ben gördüğünüz gibi laptop ekranı büyüklüğü kadar ayarladım video genişliği ve yüksekliğini. Bunun için laptop ekranın iç alanını photosop programı ile tespit ettim ve height=”216″ width=”350″ olarak hesapladım. Sizlerde bunu ister bu tarz programlarla hesaplayabilir isterseniz de deneme yanılma yöntemini kullanabilirsiniz. Bu arada unutmadan iframe kodunuzu istediğiniz video sitesinden alabilirsiniz. Örnek olarak Youtube’dan video kodu alabilmek için paylaş>ekle butonlarına sırası ile basmanız yeterli olmaktadır.

Div Ayarlamalarını Yapmak

Buraya kadar her şeyi hazırladıysanız eğer resminize yakın bir div genişliği belirlemeniz gerekecektir. Örnek olarak benim resmimin boyutu 461*310 ‘du ve bende 500px genişliğe ve 300px yüksekliğe sahip bir div genişliği belirledim. Yani div içerisinde gördüğünüz width: 500px; height: 300px; kodları. Resmi ortalamak için ise margin: 0 auto; kodunu kullandım. Eğer siz resminizi sola yaslamak isterseniz <div style=”background: url(‘/images/video-bg.jpg’) kodu ile başlamak yerine <div class=”left” style=”background:url(images/video-bg.jpg) ve sağa yaslamak isterseniz <div class=”right” style=”background:url(images/video-bg.jpg) kodunu kullanmanız gerekecektir. Tabi margin: 0 auto; kodunu kaldırmayı unutmayınız. Buraya kadar bütün işlemleri yaptıysanız eğer şimdi videoyu laptopun tam ekran alanına sığdırmanız gerekecektir. Burada yapılması gereken işlem ise padding kodu ile gerçekleşir. Bakın yukarıda padding: 20px 0 0 62px kodu bulunmaktadır. İlk kodun (20px) değiştirilmesi videonuzun aşağı ve yukarı kaymasını sağlamakta son kod ise (62px) videonuzun sağ ve sol kaymasını sağlamaktadır. Bu değerleri arttırıp azaltarak videonuzu resmin istediğiniz yerine yerleştiriniz.

Son Kontrollerin Yapılması

Son olarak bir kontrol daha yapılması gerekir. En başta belirlediğiniz resim için div boyutu, padding ayarlamalarınızdan dolayı tam istenildiği görüntüyü veremeyebilir. Örnek olarak mesela resminiz kesik şekilde görünebilir. Bunu düzeltebilmeniz için ise başta belirlemiş olduğumuz width: 500px; height: 300px; kodlarında değişiklik yapmanız gerekecektir. Burada yine deneme yanılma yöntemi uygulayabilirsiniz.

Resim içine video eklemek ile ilgili detaylı bir video da hazırlayacağım. O videoyu hazırlayana kadar bu sayfayı ziyaret edip ilgili açıklamalar ile bu çalışmayı yapamadıysanız eğer yorum bırakabilir ve sizlere yardımcı olmamı sağlayabilirsiniz.

İlgili Yazılar

1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (5 votes, average: 5,00 out of 5)
Loading...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Son Yazılanlar

iPhone 7 şarjı çabuk bitmeye başladı

iPhone 7 şarjı çabuk bitiyor iPhone 7 şarjı çabuk bitiyor ise yaşanılan bu sorunun 2 sebebi bulunmaktadır. Batarya kullanım ömrünün...

Hiçbir nasıl yazılır

Hiçbir nasıl yazılır Doğru yazılışı hiçbir. Yanlış yazılımı ise hiç bir. Örnekleme ile bu kelimenin doğru yazılışı hakkında bilgi vereyim....

Samsung Galaxy Note 20 ekran değişimi

Samsung Galaxy Note 20 ekran değişimi fiyatı Samsung Galaxy Note 20 ekran değişimi fiyatı 6 ay GSM İletişim teknik servis...

Xiaomi Mi Note 10 Lite ekran değişimi

Xiaomi Mi Note 10 Lite ekran değişimi fiyatı Xiaomi Mi Note 10 Lite ekran değişimi fiyatı 6 ay GSM İletişim...

Batmanlı ile karşılaşan Niğdeli fıkrası

Bir gün Niğdeli bir yazılımcı Batmanlı bir şirket sahibi ile tanışır. Sohbet, muhabbet derken kim daha bilgilidir diye aralarında tartışmaya...

Gündüz külahlı gece silahlı

Gündüz külahlı gece silahlı deyimi etrafındaki tüm insanlara iyi görünüp, kimsenin farkında olmadan kötü işler yapanlar için kullanılmaktadır. Kısacası göründüğü...

Xiaomi Redmi Note 9 Pro ekran değişimi

Xiaomi Redmi Note 9 Pro ekran değişimi fiyatı Xiaomi Redmi Note 9 Pro ekran değişimi fiyatı 6 ay GSM İletişim...

OnePlus 5T ekran değişimi

OnePlus 5T ekran değişimi ücreti OnePlus 5T ekran değişimi fiyatı 6 ay GSM İletişim teknik servis garantisi ile birlikte 450...