Responsive Web Tasarım Videolar

Website'de video yayınlamanın ve görüntülemenin birçok yolu vardır. Video dosyalarını websitenin sunucusuna yerleştirebilir ve HTML5 video etiketini kullanarak görüntüleyebilirsiniz. Videoları görüntülemek için <iframe> kodu sağlayan YouTube veya Vimeo kullanıyor olabilirsiniz . Her durumda, video'yu görüntülemek için sabit bir yükseklik ve genişlik eklemeniz gerekir. Örneğin:


<video width="400" height="300" ... 

<iframe width="400" height="300" ... 

<object width="400" height="300" ...

<embed width="400" height="300" ... 

Statik genişlikleri bildirmek, sıvı genişliği(responsive) ortamlarında iyi bir fikir değildir. Bu video için ana kapsayıcı, beyan edilen 400 pikselden daha daraldığında ne olur? Video görüntüler kapsayıcı divin dışına taşar.

Width özelliğini kullan


Genişlik özelliği width:%100 olarak ayarlanmışsa, video oynatıcı ölçeği otomatik olarak ekran boyutuna göre ayarlar:


video {
    width: 100%;
    height: auto;
}

ÇIKTI:

Yukarıdaki örnekte, video oynatıcının ekran boyutuna göre otomatik olarak ölçeklendiğini ve orijinal boyuttan daha büyük olabileceğini unutmayın. Daha çok, bunun yerine maksimum genişlik özelliğini kullanabiliriz.

Maksimum genişlik özelliğini kullan

Maksimum genişlik özelliği %100 olarak ayarlanırsa, video oynatıcı otomatik olarak ekrana göre ölçeklenir, ancak orijinal boyutunu aşmaz:

video {
    max-width: 100%;
    height: auto;
}

ÇIKTI:

Yukarıdaki örnekte görüldüğü üzere Maksimum genişlik özelliği max-width:%100 olarak ayarlanırsa, video oynatıcı otomatik olarak ekrana göre ölçeklenir, ancak orijinal boyutunu aşmaz:

Bir web sayfasına video ekle

Web sayfasına video ekleyebiliriz. Aşağıdaki örnek video, div alanının boyutunu temel alarak tüm div alanını otomatik olarak ayarlar ve doldurur:

video {
    width: 100%;
    height: auto;
}

önizleme buton

YouTube ve Vimeo Responsive Videolar


YouTube ve Vimeo gibi hizmetlerden videolar eklediğimizde videolar iframe elemanın içine giriyor ve genellikle yanıt vermiyor. Videonun genişliği kabın genişliği ile sınırlıdır, ancak yükseklik asla değişmeyerek video alanının çok uzun ve çok geniş olmamasına neden olur. Gömülü videolarımızı bir HTML öğesinde sarmalayarak sorunu çözeriz:

<div class="videoWrapper">
    video kodlar
</div>

Ardından, bu CSS kodlarını eklememiz gerekiyor:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…

Rıdvan Yıldız 09/11/2018

Merhaba, Sitenin slider kısmına video ekledim mobil ekranlara sığmıyor. Normal resim ekliyorum sığıyor. Yukarıda dediğiniz kodu Style css dosyasına ekledim faka değişmedi.

yönetici 09/11/2018

Rıdvan, yukarıdaki kodları normal video'ya uygularsan mutlaka çalışır. Önce cep telefonda tarayıcının geçmiş ayarları sil öyle dene Yine olmadıysa, bilgisayarında öğeye sol tıkla öğeyi incele tıkla, ordan incele mutlaka miras alan kısım vardır. birde şuna bak silider demişsin javascript kodlarıda bilmen gerekiyor resme responsive özellik vermişler videoya vermemişlerdir artı senin verdiğin css'yi javascript baskın geliyor kendi verdiği kodlar geçerlidir. Çok geniş seçi ver misal body .test img {} gibi birde !important ile etkinliği artır.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9429

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.