- Konu sahibi
- #1
YouTube videosunu HTML sayfanıza eklemek için videonun Paylaş → Yerleştir seçeneğinden aldığınız
Sabit genişlik dar ekranlarda taşmaya neden olabilir. Bunun yerine aşağıdaki CSS’i sayfanızın
Bu düzenleme oynatıcıyı bulunduğu alanın genişliğine uyarlar ve normalde 16:9 oranını korur. YouTube, oynatıcı alanının en az 200 × 200 piksel olmasını ister. Dar bir alanda
Önce
153 hatası, istekte gerekli yönlendiren sayfa bilgisinin bulunmamasıyla ilişkili olabilir. Yerleştirme adresini tarayıcının adres çubuğunda tek başına açmak yerine iframe’in bulunduğu sayfayı açın. HTML dosyasını doğrudan açarken sorun yaşıyorsanız sayfayı yerel veya yayımlanmış bir web sunucusu üzerinden deneyin. Hata sürerse sitenizin
iframe kodunu sayfanın body bölümüne yapıştırın. Dosyayı kaydedip bir web sunucusu üzerinden açtığınızda video, YouTube oynatıcısı içinde sayfanızda görünür.Yerleştirme kodunu ekleyin
iframe, başka bir sayfadaki içeriği kendi sayfanızın içinde gösteren HTML öğesidir. YouTube videosu için gerekli kodu kendiniz oluşturmak yerine YouTube’dan alabilirsiniz:- Bilgisayarda YouTube’da eklemek istediğiniz videoyu açın. Videonun altındaki Paylaş seçeneğine, ardından Yerleştir seçeneğine tıklayın.
- Açılan alandaki HTML kodunu kopyalayın. Kodun
srcözelliği, videonun YouTube oynatıcısındaki adresini içerir. - HTML dosyanızı bir metin veya kod düzenleyicisinde açın. Kodu, videonun görünmesini istediğiniz yerde
<body>ile</body>etiketleri arasına yapıştırın. - Dosyayı kaydedin ve web sunucunuzdaki sayfayı tarayıcıda açın. Oynat düğmesine basarak videonun yüklenip yüklenmediğini kontrol edin. Mevcut bir siteyi düzenliyorsanız değiştirdiğiniz dosyayı sunucuya da yükleyin.
src içindeki M7lc1UVf-VE değerini kendi video kimliğinizle değiştirin veya YouTube’dan aldığınız kodu kullanın:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video örneği</title>
</head>
<body>
<h1>Video</h1>
<iframe
width="640"
height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
title="YouTube video oynatıcısı"
allowfullscreen>
</iframe>
</body>
</html>width ve height oynatıcının boyutlarını belirler; title ise çerçevenin amacını yardımcı teknolojilere açıklar. YouTube’un normal video bağlantısını doğrudan src alanına koymak yerine, /embed/ yolunu içeren yerleştirme adresini kullanın. Oynatıcının görünmesi kodun yüklendiğini gösterir; videonun gerçekten oynatılabildiğini anlamak için oynatmayı da deneyin.Oynatıcıyı ekran genişliğine uyarlayın
Sabit genişlik dar ekranlarda taşmaya neden olabilir. Bunun yerine aşağıdaki CSS’i sayfanızın
head bölümündeki bir style bloğuna ekleyin ve iframe etiketine class="youtube-video" özelliğini verin:
HTML:
<style>
.youtube-video {
display: block;
width: 100%;
max-width: 640px;
aspect-ratio: 16 / 9;
min-height: 200px;
border: 0;
}
</style>Bu düzenleme oynatıcıyı bulunduğu alanın genişliğine uyarlar ve normalde 16:9 oranını korur. YouTube, oynatıcı alanının en az 200 × 200 piksel olmasını ister. Dar bir alanda
min-height nedeniyle oran değişebilir; alanın genişliği 200 pikselin altına düşüyorsa yerleşimi genişletin.Video açılmıyorsa neye bakmalı?
Önce
src içindeki video kimliğini ve adresin /embed/ biçiminde olduğunu kontrol edin. Video YouTube’da açılsa bile sahibi başka sitelere yerleştirilmesini engellemiş olabilir. Bu durumda video sahibinden yerleştirme iznini açmasını isteyebilir veya videoya normal bir bağlantı verebilirsiniz. Video silinmiş ya da gizli yapılmışsa doğru kimlik tek başına oynatılmasını sağlamaz.153 hatası, istekte gerekli yönlendiren sayfa bilgisinin bulunmamasıyla ilişkili olabilir. Yerleştirme adresini tarayıcının adres çubuğunda tek başına açmak yerine iframe’in bulunduğu sayfayı açın. HTML dosyasını doğrudan açarken sorun yaşıyorsanız sayfayı yerel veya yayımlanmış bir web sunucusu üzerinden deneyin. Hata sürerse sitenizin
Referrer-Policy ayarının yönlendiren bilgisini tamamen engellemediğini kontrol edin; YouTube web siteleri için strict-origin-when-cross-origin politikasını önerir. Sunucu ayarlarını siz yönetmiyorsanız hata kodunu ve sayfanın adresini site yöneticisine ileterek bu politikanın kontrol edilmesini isteyin.