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<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şturursrcembed URL biçiminde olmalı (/embed/VIDEO_ID), yalnızca normal watch sayfası değilwidthveheightyer ayırır ki yüklemede düzen zıplamasıntitleyardımcı teknolojiler için çerçeveyi adlandırır — boş veya saçma bırakmayınallowfullscreenkonak ve tarayıcı izin verirse büyütmeyi sağlar- Yeni snippet’lerde
allowvb. 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
iframegömme - Sunucunuzdaki kendi MP4/WebM →
controls’lüvideo - Kendi ses dosyanız →
controls’lüaudio
Yerel MP4’ü YouTube iframe’ine sarmayın. Watch URL’yivideosrciç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
- Alıştırma için gömebileceğiniz herkese açık bir YouTube videosu açın.
- Share → Embed kullanıp tam iframe snippet’ini kopyalayın.
- Klipi adlandıran kısa bir başlığın altında
bodyiçine yapıştırın. - Sayfayı yerel (ağ ile) açıp oynatıcının yüklendiğini doğrulayın.
width/height’i biraz değiştirip düzeni yeniden kontrol edin.- Anlamlı
titlekalsı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ı
titleunutmak - Düzeni kontrol etmeden iframe’i çok küçük/büyük yapmak
- YouTube gömmelerini kendi barındırılan
video/audioile 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
iframekullanır - Snippet doğru kalsın diye Share → Embed tercih edin
- Oynatıcıyı dikkatle boyutlandırın ve net
titletutun - 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
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 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