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

Sen uyandığında uyuyorum

"Kendi özgürlüğünü kazanmadığın sürece bu ülkeye hiçbir faydan olamaz." Hiç ummadığım ama en doğru zamanda bu cümle söylendi bana. Tarih...

Samsung Galaxy M20 ekran değişimi

Samsung Galaxy M20 akıllı telefon ekranı alınan darbeler, üzerine baskı uygulanması, yere düşme ve benzeri sebeplerden dolayı kırılabilir. Yaşanılan bu...

Avustralya’nın başkenti

Avustralya'nın başkenti Canberra'dır. Türkçe okunuşu ile Kanberra. Bu ilin nüfusu ise 395.790'dır. Avustralya'nın başkenti neresidir Avustralya'nın başkenti Kanberra'dır ancak genellikle...

Ülke nüfusları sıralı liste

Birden aklıma takıldı. Doğduğum yılda (1989) Türkiye'nin ve dünyanın nüfusu ne kadardı diye. Türkiye: 54,19 milyon Dünya: 5,198 milyar Şu...

Brezilya’nın bulunduğu kıta ve başkenti nedir

Brezilya'nın bulunduğu kıta Güney Amerika, başkenti ise Brasília'dır. Brezilya'da konuşulan dil Brezilya'da Portekizce konuşulmaktadır. Bu ayrıntıyı paylaşmak istedim hazır konu...

Kaptan Tsubasa çizgi filmindeki kaleci

Sorunun cevabını bu sefer sonda değil en başta vereyim. Kaptan Tsubasa çizgi filmindeki kalecinin adı Genzo Wakabayashi'dir. Danimarka görüşmesi Danimarka'da...

Amerikan rüyası

17 Ekim benim için nasıl geçti ? Uyandım Henüz sabahın olmadığı güne uyandım. Karanlıkta iPhone X telefonu zar zor uğraşlar...

Şam’daki caminin Ayasofya ile boy ölçüşebileceğini düşünmek bile absürt olur

Bu akşam çok sevdiğim bir insana hayallerimi anlatır iken bu kadarı da absürt olur artık dedi. Yani aslında absürt demek...