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.
Bir yanıt yazın