Player vidéo YouTube optimisé

001<script>
002class YouTubeThumbnailLoader {
003  constructor(container, videoId, title = 'Vidéo') {
004    this.container = container;
005    this.videoId = videoId;
006    this.title = title;
007    this.loaded = false;
008    
009    this.init();
010  }
011  
012  init() {
013    // Créer la structure HTML
014    this.container.innerHTML = `
015      <div class="video-thumbnail loading-shimmer">
016        <div class="play-button" aria-label="Lire la vidéo ${this.title}"></div>
017      </div>
018    `;
019    
020    this.thumbnail = this.container.querySelector('.video-thumbnail');
021    
022    // Charger la thumbnail immédiatement
023    this.loadThumbnail();
024    
025    // Ajouter l'événement de clic
026    this.container.addEventListener('click', () => this.loadVideo());
027  }
028  
029  loadThumbnail() {
030    const img = new Image();
031    img.fetchPriority = 'high';
032    img.crossOrigin = 'anonymous';
033    img.src = `https://i.ytimg.com/vi/${this.videoId}/maxresdefault.jpg`;
034    
035    img.onload = () => {
036      this.thumbnail.style.backgroundImage = `url(${img.src})`;
037      this.thumbnail.classList.remove('loading-shimmer');
038      this.thumbnail.classList.add('loaded');
039    };
040    
041    img.onerror = () => {
042      // Fallback vers hqdefault
043      const fallbackImg = new Image();
044      fallbackImg.src = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
045      fallbackImg.onload = () => {
046        this.thumbnail.style.backgroundImage = `url(${fallbackImg.src})`;
047        this.thumbnail.classList.remove('loading-shimmer');
048        this.thumbnail.classList.add('loaded');
049      };
050    };
051  }
052  
053  loadVideo() {
054    if (this.loaded) return;
055    
056    this.loaded = true;
057    
058    // Créer l'iframe YouTube
059    const iframe = document.createElement('iframe');
060    iframe.className = 'video-iframe';
061    iframe.src = `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
062    iframe.title = this.title;
063    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
064    iframe.allowFullscreen = true;
065    
066    iframe.style.width = '100%';
067    iframe.style.height = '100%';
068    iframe.style.border = 'none';
069    
070    // Remplacer le thumbnail par l'iframe
071    this.container.innerHTML = '';
072    this.container.appendChild(iframe);
073  }
074}
075
076// Auto-initialisation
077document.addEventListener('DOMContentLoaded', function() {
078  const videoContainers = document.querySelectorAll('[data-youtube-id]');
079  
080  videoContainers.forEach((container, index) => {
081    const videoId = container.getAttribute('data-youtube-id');
082    const title = container.getAttribute('data-video-title') || `Vidéo ${index + 1}`;
083    
084    if (videoId) {
085      new YouTubeThumbnailLoader(container, videoId, title);
086    }
087  });
088});
089</script>

001<!-- APRÈS (optimisé) -->
002<div class="video-container" 
003     data-youtube-id="ID DE LA VIDÉO YOUTUBE" 
004     data-video-title="TITRE DE LA VIDÉO">
005</div>
006
007<style>
008.video-container {
009  position: relative;
010  width: 100%;
011  height: 0;
012  padding-bottom: 56.25%; /* 16:9 ratio */
013  background: #f0f0f0; /* Couleur de base pendant chargement */
014  cursor: pointer;
015  overflow: hidden;
016  border-radius: 8px;
017}
018
019.video-thumbnail {
020  position: absolute;
021  top: 0;
022  left: 0;
023  width: 100%;
024  height: 100%;
025  background-size: cover;
026  background-position: center;
027  background-color: #e0e0e0; /* Gris pendant chargement */
028  transition: transform 0.3s ease;
029}
030
031.video-thumbnail.loaded {
032  background-color: transparent;
033}
034
035.video-thumbnail:hover {
036  transform: scale(1.05);
037}
038
039.play-button {
040  position: absolute;
041  top: 50%;
042  left: 50%;
043  transform: translate(-50%, -50%);
044  width: 80px;
045  height: 80px;
046  background: rgba(255, 0, 0, 0.9);
047  border-radius: 50%;
048  display: flex;
049  align-items: center;
050  justify-content: center;
051  transition: all 0.3s ease;
052  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
053  z-index: 2;
054}
055
056.play-button:hover {
057  background: #ff0000;
058  transform: translate(-50%, -50%) scale(1.1);
059}
060
061.play-button::after {
062  content: '';
063  width: 0;
064  height: 0;
065  border-left: 20px solid white;
066  border-top: 12px solid transparent;
067  border-bottom: 12px solid transparent;
068  margin-left: 4px;
069}
070
071.video-iframe {
072  position: absolute;
073  top: 0;
074  left: 0;
075  width: 100%;
076  height: 100%;
077  border: none;
078}
079
080/* Loading animation */
081.loading-shimmer {
082  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
083  background-size: 200% 100%;
084  animation: shimmer 2s infinite;
085}
086
087@keyframes shimmer {
088  0% { background-position: -200% 0; }
089  100% { background-position: 200% 0; }
090}
091</style>