🎬 Intégrations médias complètes - Images, vidéos et médias

💡 TL;DR — 90 secondes chrono

• Images : OptimizedImage avec lazy loading, Image standard, SVG, WebP
• Vidéos : YouTube, Vimeo, vidéos locales, iframes personnalisées
• Optimisations : Lazy loading, compression, formats modernes
• Accessibilité : Alt text, légendes, support clavier

---

🖼️ 1. Images - Composants et optimisations

Image standard (composant Image)

Code à copier-coller :

<Image
  src="/chemin/vers/image.jpg"
  alt="Description de l'image"
  title="Titre optionnel"
  caption="Légende optionnelle"
  width={800}
  height={400}
  rounded={true}
  shadow={true}
/>

---

Image optimisée (composant OptimizedImage)

Code à copier-coller :

<OptimizedImage
  src="/chemin/vers/image.jpg"
  alt="Description de l'image"
  title="Titre optionnel"
  caption="Légende optionnelle"
  width={800}
  height={400}
  rounded={true}
  shadow={true}
  priority={false}
  placeholder="empty"
  link="https://votre-lien.com"
/>

---

Image avec lien externe

---

📺 2. Vidéos YouTube - Intégrations complètes

Vidéo YouTube standard (16:9)

Code à copier-coller :

<YouTube
  videoId="VOTRE_VIDEO_ID"
  title="Titre de la vidéo"
  width={16}
  height={9}
/>

---

Vidéo YouTube format portrait (9:16)

Code à copier-coller :

<YouTube
  videoId="VOTRE_VIDEO_ID"
  title="Vidéo portrait"
  width={9}
  height={16}
/>

---

Vidéo YouTube format carré (1:1)

Code à copier-coller :

<YouTube
  videoId="VOTRE_VIDEO_ID"
  title="Vidéo carrée"
  width={1}
  height={1}
/>

---

🎥 3. Autres plateformes vidéo - Iframes personnalisées

Vimeo

Code à copier-coller :

<div className="my-8">
  <div className="relative w-full overflow-hidden rounded-lg shadow-lg" style={{ paddingBottom: '56.25%' }}>
    <iframe
      src="https://player.vimeo.com/video/VOTRE_VIDEO_ID?h=HASH&title=0&byline=0&portrait=0"
      title="Titre de la vidéo"
      className="absolute top-0 left-0 w-full h-full border-0"
      allow="autoplay; fullscreen; picture-in-picture"
      allowFullScreen
    />
  </div>
  <p className="mt-2 text-sm text-[var(--muted-foreground)] text-center">
    Légende de la vidéo
  </p>
</div>

---

Dailymotion

Code à copier-coller :

<div className="my-8">
  <div className="relative w-full overflow-hidden rounded-lg shadow-lg" style={{ paddingBottom: '56.25%' }}>
    <iframe
      src="https://www.dailymotion.com/embed/video/VOTRE_VIDEO_ID"
      title="Titre de la vidéo"
      className="absolute top-0 left-0 w-full h-full border-0"
      allow="autoplay; fullscreen"
      allowFullScreen
    />
  </div>
  <p className="mt-2 text-sm text-[var(--muted-foreground)] text-center">
    Légende de la vidéo
  </p>
</div>

---

🎬 4. Vidéos locales et fichiers média

Vidéo MP4 locale

Code à copier-coller :

<div className="my-8">
  <div className="relative w-full overflow-hidden rounded-lg shadow-lg">
    <video
      controls
      className="w-full h-auto"
      poster="/chemin/vers/poster.jpg"
    >
      <source src="/chemin/vers/video.mp4" type="video/mp4" />
      <source src="/chemin/vers/video.webm" type="video/webm" />
      Votre navigateur ne supporte pas la lecture de vidéos.
    </video>
  </div>
  <p className="mt-2 text-sm text-[var(--muted-foreground)] text-center">
    Légende de la vidéo
  </p>
</div>

---

Vidéo avec autoplay et loop (GIF-like)

Code à copier-coller :

<div className="my-8">
  <div className="relative w-full overflow-hidden rounded-lg shadow-lg">
    <video
      autoPlay
      loop
      muted
      playsInline
      className="w-full h-auto"
    >
      <source src="/chemin/vers/animation.mp4" type="video/mp4" />
    </video>
  </div>
  <p className="mt-2 text-sm text-[var(--muted-foreground)] text-center">
    Légende de l'animation
  </p>
</div>

---

🎭 5. GIFs et animations

GIF animé

Code à copier-coller :

<OptimizedImage
  src="/chemin/vers/animation.gif"
  alt="Description de l'animation"
  title="Titre de l'animation"
  caption="Légende de l'animation"
  width={600}
  height={400}
  rounded={true}
  shadow={true}
/>

---

🎨 6. SVG et graphiques vectoriels

SVG inline avec styles

Modulo RH

Code à copier-coller :

<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
  className="mx-auto my-8"
>
  <circle
    cx="100"
    cy="100"
    r="80"
    fill="none"
    stroke="var(--primary)"
    strokeWidth="4"
  />
  <text
    x="100"
    y="110"
    textAnchor="middle"
    className="text-sm font-semibold fill-current"
    style={{ color: 'var(--foreground)' }}
  >
    Votre texte
  </text>
</svg>

---

SVG comme image

---

📊 7. Galeries d'images

Galerie simple

Code à copier-coller :

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
  <OptimizedImage
    src="/chemin/vers/image1.jpg"
    alt="Description 1"
    title="Titre 1"
    width={300}
    height={200}
    rounded={true}
    shadow={true}
  />
  <OptimizedImage
    src="/chemin/vers/image2.jpg"
    alt="Description 2"
    title="Titre 2"
    width={300}
    height={200}
    rounded={true}
    shadow={true}
  />
  <OptimizedImage
    src="/chemin/vers/image3.jpg"
    alt="Description 3"
    title="Titre 3"
    width={300}
    height={200}
    rounded={true}
    shadow={true}
  />
</div>

---

🎯 8. Images avec overlay et actions

Image avec overlay informatif

Code à copier-coller :

<div className="relative my-8 group">
  <OptimizedImage
    src="/chemin/vers/image.jpg"
    alt="Description"
    title="Titre"
    width={800}
    height={400}
    rounded={true}
    shadow={true}
  />
  <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
    <div className="text-center text-white p-6">
      <h3 className="text-xl font-bold mb-2">Titre overlay</h3>
      <p className="text-sm">Description overlay</p>
    </div>
  </div>
</div>

---

📱 9. Images responsives et adaptatives

Image avec breakpoints

Code à copier-coller :

<OptimizedImage
  src="/chemin/vers/image.jpg"
  alt="Description"
  title="Titre"
  caption="Légende"
  width={1200}
  height={600}
  rounded={true}
  shadow={true}
  className="w-full max-w-4xl mx-auto"
/>

---

🎨 10. Images avec effets CSS

Image avec effet de zoom

Code à copier-coller :

<div className="my-8 overflow-hidden rounded-lg shadow-lg group">
  <OptimizedImage
    src="/chemin/vers/image.jpg"
    alt="Description"
    title="Titre"
    width={600}
    height={400}
    rounded={false}
    shadow={false}
    className="transition-transform duration-500 group-hover:scale-110"
  />
</div>

---

Image avec effet de filtre

Code à copier-coller :

<OptimizedImage
  src="/chemin/vers/image.jpg"
  alt="Description"
  title="Titre"
  width={600}
  height={400}
  rounded={true}
  shadow={true}
  className="filter grayscale hover:grayscale-0 transition-all duration-300"
/>

---

🔧 11. Intégrations avancées

Iframe personnalisée

Code à copier-coller :

<div className="my-8">
  <div className="relative w-full overflow-hidden rounded-lg shadow-lg" style={{ paddingBottom: '56.25%' }}>
    <iframe
      src="VOTRE_URL_IFRAME"
      title="Titre de l'iframe"
      className="absolute top-0 left-0 w-full h-full border-0"
      allowFullScreen
      loading="lazy"
    />
  </div>
  <p className="mt-2 text-sm text-[var(--muted-foreground)] text-center">
    Légende de l'iframe
  </p>
</div>

---

PDF intégré

Code à copier-coller :

<div className="my-8">
  <div className="relative w-full overflow-hidden rounded-lg shadow-lg" style={{ paddingBottom: '141.4%' }}>
    <iframe
      src="/chemin/vers/document.pdf#toolbar=0&navpanes=0&scrollbar=0"
      title="Titre du document"
      className="absolute top-0 left-0 w-full h-full border-0"
    />
  </div>
  <p className="mt-2 text-sm text-[var(--muted-foreground)] text-center">
    <a href="/chemin/vers/document.pdf" target="_blank" rel="noopener noreferrer" className="text-[var(--primary)] hover:underline">
      Télécharger le document
    </a>
  </p>
</div>

---

📋 12. Bonnes pratiques et optimisations

Checklist des bonnes pratiques

---

🎯 13. Exemples d'usage par contexte

Article de blog avec médias

---

🚀 14. Conclusion et ressources

Résumé des composants disponibles

| Type de média | Composant | Usage recommandé | |---------------|-----------|------------------| | Images | OptimizedImage | Images avec lazy loading et optimisations | | Images simples | Image | Images basiques sans optimisations avancées | | Vidéos YouTube | YouTube | Intégration YouTube avec ratio personnalisable | | Vidéos locales | <video> | Vidéos MP4/WebM hébergées localement | | Iframes | <iframe> | Intégrations personnalisées (Vimeo, Maps, etc.) | | SVG | <svg> ou OptimizedImage | Graphiques vectoriels |

Ressources utiles

• Documentation Next.js Image
• Guide d'optimisation des images
• Formats d'image modernes

---

🎯 CTA final