- Katılım
- 2 Haz 2019
- Mesajlar
- 3,417
- Tepkime puanı
- 6,736
- Puanları
- 113
- Yaş
- 46
- Konum
- istanbul
- Cinsiyet
- Erkek
İtibar Puanı:

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
Responsive Web Tasarım Videolar:
<video width="400" height="300" ...
<iframe width="400" height="300" ...
<object width="400" height="300" ...
<embed width="400" height="300" ...
Width özelliğini kullan
enişlik özelliği width:%100 olarak ayarlanmışsa, video oynatıcı ölçeği otomatik olarak ekran boyutuna göre ayarlar
Width özelliğini kullan:
video {
width: 100%;
height: auto;
}
Kod:
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
Maksimum genişlik özelliğini kullan:
video {
max-width: 100%;
height: auto;
}
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
Bir web sayfasına video ekle:
video {
width: 100%;
height: auto;
}
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 Clas:
<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%;
}