HTML’de video oynatmanın en kolay yolu YouTube’u kullanmaktır.
Videoları farklı formatlara dönüştürmek zor ve zaman alıcı olabilir.
Daha kolay bir çözüm, YouTube’un web sayfanızdaki videoları oynatmasına izin vermektir.
YouTube Video Id
Bir videoyu kaydettiğinizde (veya oynattığınızda) YouTube bir kimlik (xxxXxxXxxxY gibi) görüntüler.
Bu kimliği kullanabilir ve videonuza HTML kodunda başvurabilirsiniz.
HTML’de Bir YouTube Videosu Oynatma
Videonuzu bir web sayfasında oynatmak için aşağıdaki adımları uygulayın :
- Videoyu YouTube’a yükleyin
- Video kimliğini not edin
- Web sayfanızda bir <iframe> tanımlayın
- Src özelliğinin video URL’sini göstermesine izin verin
- Oynatıcının boyutunu belirtmek için genişlik ve yükseklik niteliklerini kullanın
- URL’ye başka parametreler ekleyin (aşağıda örnek yer almaktadır)
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/fcPCXMAcot0">
</iframe>
</body>
</html>
YouTube Autoplay + Mute
YouTube URL’sine autoplay=1 ekleyerek, bir kullanıcı sayfayı ziyaret ettiğinde videonuzun otomatik olarak oynatılmaya başlamasını sağlayabilirsiniz. Ancak bir videonun otomatik olarak başlatılması ziyaretçileriniz için can sıkıcı olabileceğinden tavsiye etmiyoruz 🙂
Not: Chromium tarayıcılar çoğu durumda otomatik oynatmaya izin vermez. Ancak sessiz otomatik oynatmaya her zaman izin verilir.
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/fcPCXMAcot0?autoplay=1&mute=1"">
</iframe>
</body>
</html>Youtube Playlist
Oynatılacak videoların virgülle ayrılmış listesi (orijinal URL’ye ek olarak) eklenir.
Youtube Loop
Videonuzun sonsuza kadar döngüye girmesine izin vermek için loop=1 ekleyin.
Değer 0 (varsayılan): Video yalnızca bir kez oynatılacaktır.
Değer 1: Video döngüye girecek (sonsuza kadar).
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/fcPCXMAcot0?&loop=1">
</iframe>
</body>
</html>Youtube Controls (Kontroller)
Video oynatıcıda kontrollerin görüntülenmemesi için controls=0 ekleyin.
Değer 0: Oynatıcı kontrolleri görüntülenmez.
Değer 1 (varsayılan): Oynatıcı kontrolleri ekranı.
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/fcPCXMAcot0?controls=0">
</iframe>
</body>
</html>