Arka Plana Video Ekleme HTML
Arka plana video eklemek, web sitenize görsel ilgi ve hareket katmanın harika bir yoludur. Bunu yapmak için birkaç farklı yol vardır, ancak en yaygın yöntem HTML5 video öğesini kullanmaktır.
HTML5 Video Öğesi
HTML5 video öğesi, web sayfalarına video eklemek için kullanılan bir HTML öğesidir. Bu öğe, video dosyasının URL’sini ve video oynatıcı için çeşitli seçenekleri belirlemenizi sağlar.
Aşağıdaki örnek, HTML5 video öğesini kullanarak bir web sayfasına video ekler:
“`html
“`
Bu örnekte, video öğesi 320 piksel genişliğinde ve 240 piksel yüksekliğindedir. Ayrıca, video oynatıcı için oynatma kontrolleri etkinleştirilmiştir.
Video öğesi, iki farklı video dosyası kaynağı içerir. İlk kaynak MP4 video dosyasıdır ve ikinci kaynak WebM video dosyasıdır. Bu, farklı tarayıcıların farklı video formatlarını desteklemesi nedeniyle yapılır.
Eğer tarayıcınız video öğesini desteklemiyorsa, “Your browser does not support the video tag.” mesajı görüntülenecektir.
Arka Plana Video Ekleme
Arka plana video eklemek için, video öğesini bir CSS arka plan resmi olarak kullanabilirsiniz. Bunu yapmak için, aşağıdaki CSS kodunu kullanabilirsiniz:
css
body {
background-image: url(video.mp4);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Bu kod, video dosyasını arka plan resmi olarak ayarlar ve videoyu arka planın tamamını kaplayacak şekilde ölçeklendirir. Ayrıca, videoyu arka planın ortasına yerleştirir ve videonun tekrarlanmasını önler.