Yükleniyor...

HTML YouTube

Audio ve video dersleri dosyalarınızı media/ gibi klasörlerde barındırmayı öğretti. YouTube farklıdır: akışlarını sunucunuza indirmez ve yerel bir video öğesini watch sayfasına bağlamazsınız. YouTube’un verdiği snippet ile bir iframe kullanarak oynatıcılarını gömersiniz. Sayfanız görece hafif kalır; ağır oynatıcı arayüzü ve video verileri ağlı bir ziyarette YouTube sunucularından gelir.

Gömme ne demek

Gömme, başka bir sitenin etkileşimli sayfasını (burada bir oynatıcı) sayfanızda dikdörtgen bir çerçeveye yerleştirir. Ziyaretçi başlıklarınızı ve paragraflarınızı hâlâ çevrede görür ama kontroller, marka ve akış YouTube’dan gelir. Bu yüzden işaretleme youtube.com/embed/... adresli bir iframe gibidir; src="media/clip.mp4" olan yerel video gibi değil. Zihnen ayırın: «dosyayı ben barındırıyorum» ile «başkasının oynatıcısını çerçeveliyorum».

Doğrudan yanıt

YouTube’da videoyu açın → Share → Embed → <iframe …> snippet’ini HTML body içine yapıştırın. Anlamlı width ve height koyun. src o video için YouTube gömme URL’sidir. İzinler, URL biçimi ve önerilen öznitelikler doğru kalsın diye resmi diyaloğu tercih edin; sohbet linkinden tahmin etmeyin.

Resmi iframe kalıbı

VIDEO_ID’yi YouTube’daki gerçek id ile değiştirin (Share → Embed zaten doldurur). Örnek, bir-iki kopyadan sonra tanıdık başlangıç şeklini gösterir. Bunu anlam kalıbı sayın, sıfırdan gömme sunucusu icat etme nedeni değil.

YouTube embed iframe (example pattern)

html
HTML Code
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>

Gömme örneğini okumak

  • iframe üçüncü taraf oynatıcı bölgesini oluşturur
  • src embed URL biçiminde olmalı (/embed/VIDEO_ID), yalnızca normal watch sayfası değil
  • width ve height yer ayırır ki yüklemede düzen zıplamasın
  • title yardımcı teknolojiler için çerçeveyi adlandırır — boş veya saçma bırakmayın
  • allowfullscreen konak ve tarayıcı izin verirse büyütmeyi sağlar
  • Yeni snippet’lerde allow vb. olabilir — resmi diyaloğun verdiğini tutun
  • Önce Share → Embed’den yapıştırın; sütun gerekirse sonra boyutu ayarlayın

Yeni başlayan neden kopyalar, icat etmez

src içine watch URL elle yazmak, query uydurmak veya youtu.be kısa linkini yanlış özniteliğe koymak çoğu zaman boş kutu üretir. Embed diyaloğu güncel oynatıcı gereksinimlerine uyan URL ve öznitelikler verir. Başarılı bir yapıştırmadan sonra kalıbı görür ve boyutları bilinçle değiştirirsiniz.

Sayfayı bozmadan boyut

560 × 315 gibi klasik başlangıç boyutları tanıdık 16:9 hissi verir. Çok küçük iframe kontrolleri gizler; çok büyük dar ekranları taşırır. Resmi boyutlarla başlayın, sütun darsa biraz küçültün. Sonraki CSS dersleri akışkan gömmeleri anlatır; burada amaç basit düzeni bozmayan çalışan bir oynatıcıdır.

Üçüncü taraf maliyeti ve gizlilik

YouTube gömmek Google sunucularına ağ istekleri ekler. Tarayıcı, bölge ve oynatıcı seçeneklerine göre çerezler veya benzer depolama işin içine girebilir. Sayfanız YouTube’un erişilebilir ve videonun gömülebilir kalmasına da bağlıdır. Birçok herkese açık eğitim için bu kabul edilebilir. Çevrimdışı dostu özel sınıf klipleri için kendi barındırılan video çoğu zaman daha temizdir. Bilerek seçin: klip zaten YouTube’daysa gömün; dosya kontrolü istiyorsanız barındırın.

YouTube vs video vs audio

  • Klip zaten YouTube’da, onların oynatıcısı → Share → Embed’den iframe gömme
  • Sunucunuzdaki kendi MP4/WebM → controls’lü video
  • Kendi ses dosyanız → controls’lü audio
    Yerel MP4’ü YouTube iframe’ine sarmayın. Watch URL’yi video src içine koyup yerel HTML oynatıcı beklemeyin. Aracı medyanın yaşadığı yerle eşleştirin.

Gömme için erişilebilirlik alışkanlıkları

iframe’e video konusunu anlatan net bir title verin. Klip neden sayfada diye açıklayan çevre metin tutun. Konuşulan içerik ders için zorunluysa döküm bağlayın veya özet yapıştırın — yalnız çerçeve iyi bir paragrafın yerini tutmaz.

Düzenleyicide alıştırma

  1. Alıştırma için gömebileceğiniz herkese açık bir YouTube videosu açın.
  2. Share → Embed kullanıp tam iframe snippet’ini kopyalayın.
  3. Klipi adlandıran kısa bir başlığın altında body içine yapıştırın.
  4. Sayfayı yerel (ağ ile) açıp oynatıcının yüklendiğini doğrulayın.
  5. width/height’i biraz değiştirip düzeni yeniden kontrol edin.
  6. Anlamlı title kalsın ve çevresine bir bağlam cümlesi yazın.

Kolay hatalar

  • Yanlış gömme URL yazmak veya watch linkini src’ye yapıştırmak
  • iframe’de yararlı title unutmak
  • Düzeni kontrol etmeden iframe’i çok küçük/büyük yapmak
  • YouTube gömmelerini kendi barındırılan video / audio ile karıştırmak
  • YouTube’a ağ olmadan iframe’in tam çalışmasını beklemek
  • Çevre ders metnini silip yalnızca oynatıcıya güvenmek
  • Her videonun gömmeye izin verdiğini sanmak
  • Yalnızca watch URL’yi paragrafa kopyalayıp «gömme» demek

Özet

  • YouTube gömmeleri embed URL’li bir iframe kullanır
  • Snippet doğru kalsın diye Share → Embed tercih edin
  • Oynatıcıyı dikkatle boyutlandırın ve net title tutun
  • Bunun üçüncü taraf içerik olduğunu, diskteki yerel dosya olmadığını unutmayın
  • Dosyayı siz barındırıyorsanız video/audio; oynatıcıyı YouTube barındırıyorsa iframe

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek