css ile video galerisine sabit boyut verme nasıl yapılır

mali2012

Asistan
Merhabalar. Yaptığım siteye bir video slaytı koydum. Slayt'da sadece html kodları var. Vidyonun biri "400px" yüksekliğinde bir diğeri "500px". Slayt ile vidyodan vidyoya geçerken boyut farkından dolayı oynamalar oluyor. "max-height" ile de sorunu çözemedim. Ne yapmam gerekli, bir bileninz var mı, arkadaşlar?
 

mali2012

Asistan
<div class="carousel-item active" style="max-height: 500px;">
<video controls>
<source src="videos/video-1.mp4" type="video/mp4">
</video>
</div>


şeklinde yaptım.
 

Samet UCA

Profesör
Kodu şu şekilde düzenle

HTML:
<div class="carousel-item active" style="max-height: 500px;">
<video controls> 
<main>
  <iframe width="560" height="315" src="VideoYolu" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</main>
</video>
</div>

CSS kodlarının bulunduğu dosyayada şunları yaz

CSS:
video,
iframe {
  width: 100% !important;
  height: auto !important;
}

main {
  background: white;
  height: 100vh;
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
}
 

mali2012

Asistan
Bu şekilde çıktı sonuç. Next ile ilerliyor ama video çıkmıyor. Arkaplannı mavi yapmıştım, renge takılma.
Bu arada " allow="accelerometer; encrypted-media; gyroscope; " ben bunların internetten ne olduğunu bulamadım. Bu kodlar ne işe yarıyor?
 

Ekli dosyalar

  • video.png
    video.png
    11.3 KB · Görüntüleme: 17
Üst