YouTube API ile Video Bilgisi Çekme: Uygulamalı Mini Proje

YouTube, dünya üzerindeki en büyük video platformu olarak geliştiricilere güçlü bir API sunmaktadır. YouTube Data API v3 sayesinde videolar hakkında detaylı bilgiler çekebilir, arama yapabilir ve bu verileri kendi projelerinizde kullanabilirsiniz.

Bu yazıda, tek bir PHP dosyasında çalışan, modern arayüzlü bir YouTube Video Bilgi Çekici uygulaması geliştireceğiz.

Proje Özellikleri

Geliştireceğimiz uygulama şu özelliklere sahip olacak:

• Video Bilgisi Çekme: URL veya Video ID ile detaylı video bilgilerini getirme
• Video Arama: Anahtar kelime ile YouTube'da arama yapma
• Modal Video Oynatıcı: Sayfa içinde video izleme imkanı
• Responsive Tasarım: Mobil uyumlu modern arayüz
• JSON Çıktısı: Ham API verisini görüntüleme ve kopyalama

Gereksinimler

Projeyi çalıştırabilmek için aşağıdakilere ihtiyacınız var:

• PHP 7.0 veya üzeri (cURL veya file_get_contents desteği ile)
• Web sunucusu (Apache, Nginx veya XAMPP/WAMP)
• YouTube Data API v3 anahtarı

YouTube API Anahtarı Alma

API anahtarı almak için şu adımları izleyin:

1. Google Cloud Console'a gidin
2. Yeni bir proje oluşturun veya mevcut projeyi seçin
3. APIs & Services > Library bölümüne gidin
4. YouTube Data API v3'ü bulun ve etkinleştirin
5. APIs & Services > Credentials bölümünden API Key oluşturun

Proje Yapısı

Uygulamamız tek bir PHP dosyasından oluşuyor. Dosyanın yapısı şu şekilde:

youtube-video-info.php
├── PHP Backend (API İşlemleri)
│   ├── getVideoInfo - Video bilgisi çekme
│   └── searchVideos - Video arama
├── HTML Arayüz
│   ├── Tab Sistemi (Video Bilgisi / Arama)
│   ├── Video Kartı
│   ├── Arama Sonuçları
│   └── Modal Oynatıcı
├── CSS Stilleri
└── JavaScript (AJAX İşlemleri)

PHP Backend Kodları

Dosyanın en başında API işlemlerini yapan PHP kodları yer alıyor. Bu sayede AJAX istekleri JSON formatında yanıtlanıyor:

<?php
// API İşlemleri - En başta olmalı (HTML çıktısından önce)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    header('Content-Type: application/json; charset=utf-8');
    
    $apiKey = 'YOUR_API_KEY_HERE';
    
    // Video Bilgisi Getir
    if ($_POST['action'] === 'getVideoInfo') {
        $videoId = trim($_POST['videoId'] ?? '');
        
        $apiUrl = 'https://www.googleapis.com/youtube/v3/videos?' . http_build_query([
            'part' => 'snippet,contentDetails,statistics',
            'id' => $videoId,
            'key' => $apiKey
        ]);
        
        $response = file_get_contents($apiUrl);
        $data = json_decode($response, true);
        
        echo json_encode(['success' => true, 'data' => $data['items'][0]]);
        exit;
    }
}
?>

Video ID Çıkarma Fonksiyonu

Kullanıcılar farklı formatlarda YouTube URL'si girebilir. Bu fonksiyon tüm formatları destekler:

function extractVideoId(input) {
    // Zaten bir video ID ise
    if (/^[a-zA-Z0-9_-]{11}$/.test(input)) return input;
    
    // YouTube URL formatları
    const patterns = [
        /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/,
        /youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]{11})/
    ];
    
    for (const p of patterns) {
        const m = input.match(p);
        if (m) return m[1];
    }
    return null;
}

Bu fonksiyon şu URL formatlarını destekler:

• https://www.youtube.com/watch?v=VIDEO_ID
• https://youtu.be/VIDEO_ID
• https://www.youtube.com/embed/VIDEO_ID
• https://www.youtube.com/shorts/VIDEO_ID
• Doğrudan Video ID (11 karakter)

AJAX ile Veri Çekme

Video bilgilerini çekmek için fetch API'sini kullanıyoruz:

async function getVideoInfo(videoId = null) {
    const input = videoId || document.getElementById('videoUrl').value.trim();
    const vid = extractVideoId(input);
    
    const formData = new FormData();
    formData.append('action', 'getVideoInfo');
    formData.append('videoId', vid);
    
    const resp = await fetch(window.location.href, { 
        method: 'POST', 
        body: formData 
    });
    
    const data = await resp.json();
    
    if (data.success) {
        displayVideo(data.data);
    }
}

Modal Video Oynatıcı

Video izleme deneyimini iyileştirmek için modal bir oynatıcı ekliyoruz:

function openModal(videoId) {
    const modal = document.getElementById('videoModal');
    const frame = document.getElementById('videoFrame');
    frame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    modal.classList.add('show');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    const modal = document.getElementById('videoModal');
    const frame = document.getElementById('videoFrame');
    frame.src = '';
    modal.classList.remove('show');
    document.body.style.overflow = '';
}

API Yanıt Yapısı

YouTube API'den dönen veri şu yapıdadır:

{
  "id": "VIDEO_ID",
  "snippet": {
    "title": "Video Başlığı",
    "description": "Video açıklaması...",
    "channelTitle": "Kanal Adı",
    "publishedAt": "2024-01-15T10:30:00Z",
    "thumbnails": {
      "default": { "url": "...", "width": 120, "height": 90 },
      "medium": { "url": "...", "width": 320, "height": 180 },
      "high": { "url": "...", "width": 480, "height": 360 },
      "maxres": { "url": "...", "width": 1280, "height": 720 }
    },
    "tags": ["etiket1", "etiket2", "etiket3"]
  },
  "contentDetails": {
    "duration": "PT10M30S"
  },
  "statistics": {
    "viewCount": "1500000",
    "likeCount": "45000",
    "commentCount": "2300"
  }
}

Sayı ve Süre Formatlama

Büyük sayıları ve ISO 8601 süresini okunabilir hale getiren yardımcı fonksiyonlar:

// Sayı formatla (1.5M, 45K gibi)
function formatNum(n) {
    if (!n) return '0';
    n = parseInt(n);
    if (n >= 1000000) return (n/1000000).toFixed(1) + 'M';
    if (n >= 1000) return (n/1000).toFixed(1) + 'K';
    return n.toLocaleString('tr-TR');
}

// ISO 8601 süresini formatla (PT10M30S -> 10:30)
function formatDuration(d) {
    const m = d.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
    if (!m) return d;
    const h = m[1] ? m[1].padStart(2,'0') + ':' : '';
    const min = (m[2] || '0').padStart(2,'0');
    const sec = (m[3] || '0').padStart(2,'0');
    return h + min + ':' + sec;
}

Projeyi İndirin

Projenin iki farklı sürümünü hazırladık. İhtiyacınıza göre birini seçebilirsiniz:

🔓 API Key Girişli Sürüm (Önerilen)

Bu sürümde API anahtarı kod içinde yer almaz. Kullanıcılar kendi API anahtarlarını arayüzden girerler ve anahtar tarayıcıda (localStorage) saklanır. Paylaşım için idealdir.

📥 API Key Girişli Sürümü İndir

Kurulum:

1. Dosyayı web sunucunuza yükleyin
2. Tarayıcıda açın
3. API Key alanına YouTube Data API v3 anahtarınızı girin
4. Kullanmaya başlayın!

🔒 API Key Gömülü Sürüm

Bu sürümde API anahtarı doğrudan PHP koduna gömülüdür. Kendi sitenizde kullanmak için uygundur ancak kodu paylaşırken API anahtarınızı silmeyi unutmayın.

📥 API Key Gömülü Sürümü İndir

Kurulum:

1. Dosyayı web sunucunuza yükleyin
2. PHP dosyasını açın ve $apiKey değişkenini kendi anahtarınızla değiştirin
3. Tarayıcıda açın ve kullanmaya başlayın

Güvenlik Önerileri

Uygulamayı canlı ortamda kullanırken şu güvenlik önlemlerini alın:

• API Anahtarı Kısıtlaması: Google Cloud Console'dan API anahtarınızı sadece belirli domainlerden çalışacak şekilde kısıtlayın
• Rate Limiting: API kotanızı aşmamak için istek sınırlaması ekleyin
• Input Validasyonu: Kullanıcı girdilerini her zaman doğrulayın
• HTTPS: Canlı ortamda mutlaka HTTPS kullanın

Geliştirme Fikirleri

Bu projeyi temel alarak şunları ekleyebilirsiniz:

• Kanal bilgisi çekme
• Playlist listeleme
• Video yorumlarını görüntüleme
• Favori videolar listesi (localStorage ile)
• Video karşılaştırma özelliği
• İstatistik grafikleri

Sonuç

Bu yazıda YouTube Data API v3 kullanarak modern bir video bilgi çekici uygulaması geliştirdik. Tek dosyada çalışan bu proje, API kullanımı, AJAX işlemleri ve responsive tasarım konularında pratik bir örnek sunmaktadır.

Sorularınız veya önerileriniz için yorum bölümünü kullanabilirsiniz. İyi kodlamalar!