Paylaşımın Ve Sohbetin Tek Adresine HoşGeldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Responsive Web Tasarımla Videoları Sayfaya Sığdırmak

Katılım
2 Haz 2019
Mesajlar
3,417
Tepkime puanı
6,736
Puanları
113
Yaş
45
Konum
istanbul
Cinsiyet
Erkek

İtibar Puanı:

how-to-upload-a-video-to-youtube.jpg

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" ...
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

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%;
}
 
Tüm sayfalar yüklendi.

Konuyu Görüntüleyen Kullanıcılar (Toplam:0)

Benzer konular Forum Tarih
Website Tasarımı 1 100

Benzer konular