Kurumsal Site

İki tür video planla

Hero için: 30 sn brand story (ekip + ofis + 'biz neyiz'). Hizmet sayfaları için: 60 sn süreç anlatımı (ne yapıyoruz, nasıl).

Video player component

react-player kullan — YouTube/Vimeo/MP4 desteği var.

npm install react-player

Hero video bileşeni

Autoplay, mute, loop, controls hover'da göster:

"use client";
import dynamic from 'next/dynamic';
const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });

export function HeroVideo({ url }: { url: string }) {
  return (
    <div className="relative rounded-2xl overflow-hidden shadow-2xl">
      <ReactPlayer
        url={url}
        playing
        muted
        loop
        playsinline
        width="100%"
        height="100%"
        controls={false}
        config={{
          file: { attributes: { poster: '/hero-poster.jpg' } }
        }}
      />
      {/* Sessize alma butonu overlay */}
      <button className="absolute bottom-4 right-4 bg-black/50 backdrop-blur p-2 rounded-full">
        <SpeakerIcon />
      </button>
    </div>
  );
}

Slider ile hizmet videoları

Hizmetler sayfasında 5 hizmet → 5 video. Swiper ile carousel:

<Swiper modules={[Pagination, Navigation]} navigation pagination={{ clickable: true }}>
  {services.map(s => (
    <SwiperSlide key={s.id}>
      <ReactPlayer url={s.videoUrl} controls width="100%" />
      <h3>{s.title}</h3>
      <p>{s.description}</p>
    </SwiperSlide>
  ))}
</Swiper>

Performans: lazy load

Sayfa açılışında video yüklenmesin. Intersection Observer ile viewport'a girince yükle.

// next/dynamic + viewport check ile lazy
const VideoSlider = dynamic(() => import('./VideoSlider'), {
  loading: () => <Skeleton />,
  ssr: false,
});

YouTube/Vimeo alternatifi

Eğer videoları YouTube'da tutarsanız: thumbnail göster, tıklayınca embed yükle. Bandwidth tasarrufu + ilk yükleme 5× hızlanır.

// lite-youtube-embed kütüphanesi
npm install lite-youtube-embed
// Sonra: <lite-youtube videoid="xxx" />