Html Arka Plana Video Ekleme Sesli

HTML Arka Planına Video Ekleme (Sesli)

Bir web sitesine arka plan videosu eklemek, ziyaretçiler için ilgi çekici ve sürükleyici bir deneyim yaratmanın harika bir yoludur. Sesli bir arka plan videosu, web sitenize daha da fazla etki ve atmosfer katabilir. Bu makalede, HTML kullanarak arka planınıza sesli bir video ekleme adımlarını ayrıntılı olarak inceleyeceğiz.

Adım 1: Video Dosyanızı Hazırlayın

İlk adım, arka planınızda kullanmak istediğiniz video dosyasını hazırlamaktır. Video dosyası MP4, WebM veya Ogg gibi web uyumlu bir formatta olmalıdır. Ayrıca, videonun boyutunun web sitenizin yükleme süresini etkilemeyeceğini unutmayın.

Adım 2: HTML Kodunuzu Oluşturun

Video dosyanızı hazırladıktan sonra, HTML kodunuzu oluşturmanız gerekir. Arka plan videosunu eklemek için <video> etiketini kullanacağız. İşte temel HTML kodu:

“`html

“`

  • autoplay özniteliği, sayfanın yüklenmesiyle birlikte videonun otomatik olarak oynatılmasını sağlar.
  • loop özniteliği, videonun bittiğinde yeniden başlamasını sağlar.
  • muted özniteliği, videonun sessiz olarak oynatılmasını sağlar.
  • src özniteliği, video dosyasının yolunu belirtir.
  • type özniteliği, video dosyasının formatını belirtir.

Adım 3: Videoyu Arka Plan Olarak Ayarlayın

Videoyu arka plan olarak ayarlamak için CSS kullanacağız. İşte CSS kodu:

css
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

  • position: fixed; video öğesini sabit bir konumda tutar, böylece kaydırma sırasında hareket etmez.
  • top: 0; ve left: 0; video öğesini sayfanın sol üst köşesine yerleştirir.
  • width: 100%; ve height: 100%; video öğesinin sayfanın tüm genişliğini ve yüksekliğini kaplamasını sağlar.
  • z-index: -1; video öğesini diğer sayfa öğelerinin arkasına yerleştirir.

Adım 4: Ses Seviyesini Ayarlayın

Varsayılan olarak, video sessiz olarak oynatılır. Ses seviyesini ayarlamak için HTML kodunuza volume özniteliğini ekleyebilirsiniz. İşte örnek:

“`html

“`

volume özniteliği, 0 ile 1 arasında bir değer alır, burada 0 sessiz ve 1 tam ses seviyesidir.

Faydalı Kaynaklar

Sonuç

HTML kullanarak arka planınıza sesli bir video eklemek, web sitenize dinamik ve ilgi çekici bir unsur eklemenin harika bir yoludur. Bu makalede verilen adımları izleyerek, ziyaretçileriniz için sürükleyici ve unutulmaz bir deneyim yaratabilirsiniz.

Yayımlandı

kategorisi