vue-youtube-player-clean

Vue 3 için temiz YouTube player component'i. YouTube'un kendi UI'ını gizler, özel kontroller sunar.

Özellikler

• 🎬 YouTube UI tamamen gizli (başlık, kontroller, paylaş butonu yok)
• 🔊 Özel ses kontrolü
• 📺 Özel tam ekran kontrolü
• 🎨 Minimal ve modern tasarım
• 📦 Composable'lar ile esnek kullanım
• 🔧 TypeScript desteği

Kurulum

npm install vue-youtube-player-clean

Kullanım

Basit Kullanım

<script setup>
import { YouTubePlayer } from 'vue-youtube-player-clean'
import 'vue-youtube-player-clean/style.css'
</script>

<template>
  <YouTubePlayer video-id="dQw4w9WgXcQ" />
</template>

Plugin Olarak Kayıt

// main.js
import { createApp } from 'vue'
import VueYouTubePlayer from 'vue-youtube-player-clean'
import 'vue-youtube-player-clean/style.css'

const app = createApp(App)
app.use(VueYouTubePlayer)
app.mount('#app')

<template>
  <!-- Global olarak kullanılabilir -->
  <YouTubePlayer video-id="dQw4w9WgXcQ" />
</template>

Composable Kullanımı

Kendi player'ınızı oluşturmak için composable'ları kullanabilirsiniz:

<script setup>
import { ref, onMounted } from 'vue'
import { useYouTubePlayer, useFullscreen } from 'vue-youtube-player-clean'

const wrapperRef = ref(null)
const { isMuted, init, toggleMute } = useYouTubePlayer()
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(wrapperRef)

onMounted(() => {
  init('my-player', 'dQw4w9WgXcQ')
})
</script>

<template>
  <div ref="wrapperRef">
    <div id="my-player"></div>
    <button @click="toggleMute">{{ isMuted ? 'Unmute' : 'Mute' }}</button>
    <button @click="toggleFullscreen">Fullscreen</button>
  </div>
</template>

API

YouTubePlayer Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | video-id | string | ✅ | YouTube video ID |

YouTubePlayer Exposed Methods

<script setup>
import { ref } from 'vue'

const playerRef = ref(null)

// Exposed methods
playerRef.value.toggleMute()
playerRef.value.toggleFullscreen()

// Exposed state
playerRef.value.isMuted
playerRef.value.isReady
playerRef.value.isFullscreen
</script>

<template>
  <YouTubePlayer ref="playerRef" video-id="..." />
</template>

useYouTubePlayer()

const {
  player,      // YouTube player instance
  isReady,     // Player hazır mı?
  isMuted,     // Ses kapalı mı?
  isPlaying,   // Oynatılıyor mu?
  init,        // Player'ı başlat
  toggleMute,  // Sesi aç/kapat
  play,        // Oynat
  pause,       // Duraklat
  togglePlay,  // Oynat/Duraklat
  destroy      // Player'ı yok et
} = useYouTubePlayer()

useFullscreen(elementRef)

const {
  isFullscreen,  // Tam ekran mı?
  enter,         // Tam ekrana gir
  exit,          // Tam ekrandan çık
  toggle         // Tam ekran aç/kapa
} = useFullscreen(elementRef)

Lisans

MIT