Youtube, günümüzde video ambarı olarak kullanılan bir platformdur. Bu platformu kullanan kişilerin sayısı gün geçtikçe artmaktadır. Gerek para kazandırması gerekse ünlü yapması gerekse sunucularının hızlı ve güvenli çalışması nedeniyle yediden yetmiş yediye tüm insanların mutlaka uğradığı bir yer haline gelmiştir.
Bu makalemizde Youtube videolarının web sayfalarında nasıl kullanılacağı anlatılacaktır. Öncelikle Youtube videosuna ait embed kodunun kopyalanması gerekir. Embed kodu almak için şu aşamalar kullanılmaktadır.
YouTube web sitesine girilir.
Örneğin Youtube arama bölümüne web programlama yazıp aratalım.
Çıkan sonuçlardan dilediğiniz video üzerine tıklayabilirsiniz.
Ardından açılan sayfada video altında “PAYLAŞ” linki çıkacaktır. Üzerine tıklıyoruz.
Açılan kutucuğun üzerinde “YERLEŞTİR” adlı linkin üzerine tıklıyoruz.
Önümüzde açılan pencere üzerinden sol tarafta video sağ tarafta ise Video Embed Kodu olduğunu göreceksiniz.
Videonun özelliklerini sağ taraftan belirleyebilirsiniz.
Video kodunu açılan pencerenin sağ en alt köşesinde “KOPYALA” linkine basarak da alabilirsiniz. Aynı zamanda “Embed Video” yazan başlığın altından da alabilirsiniz.
Aşağıdaki gibi bir kodu sitenizdeki HTML bölümündeki ilgili yere yerleştirmeniz gerekmektedir.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/5VWdSkVHZdw?si=1nvI3hKX8BHUJCj5"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
YouTube videosunu almışken Embed kodu özelliklerinden de bahsedelim.
Youtube üzerinden alınan embed kodu üzerinde bir takım değişikler yaparak videonun sesini kapatma belirli bir saniyeden başlatma gibi özellikler yapabilirsiniz. Bu özellik kodlarını aşağıda sizlerle paylaşalım.
width=”560” : Videonun genişliği anlamına gelmektedir.
height=”315” : Videonun uzunluğu anlamına gelmektedir.
control=0 : Durdur, başlat vs butonların gösterip gizlemek için kullanılır.
autoplay=1 : Videonun otomatik başlaması için yazılır.
rel=0 : İlişkili videoların çıkmaması için kullanılır.
Yukarıda verdiğimiz Youtube video linkini hazırlayacağımız bir web sayfasında görüntüleyelim.
Visual Studio 2022 programını açalım.
Create a new project diyerek yeni bir proje oluşturalım.
Dil olarak c#, platform olarak Windows, ortam olarak Web seçelim. Ekrana gelen şablonlardan Asp.Net Web Applicaton(.Net Framework) seçelim.
Proje ismi olarak YoutubeVideoList verelim. Framework 4.8 seçelim.
Empty diyerek boş bir proje oluşturalım. Create deyip projeyi tamamlayalım.
Projeye ismi index.html olan bir web sayfası ekleyelim ve aşağıdaki gibi tasarlayalım.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Youtube Video Ekleme</title>
</head>
<body>
<h3>Youtube Video Görüntüleme</h3>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/5VWdSkVHZdw?si=1nvI3hKX8BHUJCj5"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</body>
</html>
Projeyi kaydedip çalıştıralım. Web sayfasında youtube videosunun çalıştığını görürsünüz.