HTML YouTube Videoları

Web tasarım derslerimize sayfamıza YouTube videoları ekleme ile devam ediyoruz.

Bir videoyu internet sitemizde oynatmanın en kolay yolu YouTube kullanmaktır.

Video Formatlarıyla Mücadele

Önceki derslerimizde, tüm tarayıcılarda oynatılabilmesi için videolarınızı başka formatlara dönüştürmeniz gerekebileceğini gördünüz.

Videoları farklı formatlara dönüştürmek zor ve zaman alıcı bir işlemdir.

Daha kolay bir yöntem, videoyu YouTube’a yükleyip sayfanızda YouTube oynatıcısıyla göstermektir.

YouTube videosunu HTML’de oynatma

Videolarınızı bir HTML sayfasında oynatabilmek için şu adımları izleriz:

• Videoyu YouTube’a yükleyin.
• Video kimliğini (adresteki v= değerinden sonraki kod) not alın.
• Web sayfanızda bir <iframe> öğesi tanımlayın.
• src yoluna https://www.youtube.com/embed/ adresinin sonuna video kimliğini ekleyerek yazın.
• Videonun oynatma boyutunu belirlemek için bir yükseklik ve genişlik verin.
• Gerekirse adrese diğer parametreleri ekleyin.

Örnek aşağıdaki gibi:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/awixFJbpd4s">
</iframe>

Parametreler adresin sonuna ? ile eklenir; birden fazla parametre & ile ayrılır.

YouTube Otomatik Oynatma

Videonuza ufak bir parametre ekleyerek kullanıcı sayfanızı ziyaret ettiğinde videonun otomatik olarak oynatılmasını sağlayabilirsiniz.

Not: Videolarınıza otomatik oynatma özelliği verirken dikkatli düşünün; videoların kendiliğinden başlaması siteye giren ziyaretçiler tarafından hoş karşılanmayabilir ve ters etki yaratabilir. Ayrıca tarayıcılar yalnızca sessiz videoların kendiliğinden başlamasına izin verir; bu yüzden mute=1 de eklenir.

Değer 0 (varsayılan) olursa: Oynatıcı yüklendiğinde video otomatik olarak başlamaz.

Değer 1 olursa: Video sayfa yüklendiğinde otomatik olarak başlar.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/awixFJbpd4s?autoplay=1&mute=1">
</iframe>

YouTube Döngüsü

Değer 0: Video yalnızca bir kez oynatılır.

Değer 1: Video sürekli tekrar eder. Döngünün çalışması için playlist parametresine aynı video kimliği de yazılmalıdır.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/awixFJbpd4s?playlist=awixFJbpd4s&loop=1">
</iframe>

YouTube Kontrolleri

Değer 0: Oynatıcı denetimleri görüntülenmez.

Değer 1: Oynatıcı denetimleri görüntülenir (varsayılan).

<iframe width="420" height="315"
src="https://www.youtube.com/embed/awixFJbpd4s?controls=0">
</iframe>