Insérer une vidéo YouTube

Magix CMS 4 introduit une gestion optimisée des contenus multimédias, privilégiant la performance brute et le respect de la vie privée des utilisateurs.

1. Le concept de Façade (Lazy-loading)

Pour garantir des temps de chargement ultra-rapides, Magix CMS 4 n'insère plus d'iframe YouTube directement au chargement de la page. Le système utilise une façade intelligente :

• Affichage initial : Une image de prévisualisation (placeholder) haute définition est générée.

• Déclenchement : Le véritable lecteur YouTube est injecté dynamiquement uniquement lorsque l'utilisateur clique sur l'image.

• Impact : Ce procédé élimine le chargement de plusieurs mégaoctets de scripts tiers au démarrage, optimisant ainsi le score LCP (Largest Contentful Paint).

2. Utilisation dans TinyMCE 7

L'insertion s'effectue via le plugin YouTube dédié dans l'éditeur TinyMCE 7. Le code généré est entièrement compatible avec les standards de Bootstrap 5.3.X.

Exemple de structure HTML

Le plugin génère une structure utilisant la propriété CSS aspect-ratio, assurant que le bloc conserve ses proportions exactes sur tous les types d'écrans.

<div class="magix-ytb-container mb-3" data-ratio="16 / 9">
    <picture class="ytb-video-preview" data-ytb='{"videoId":"lBTCB7yLs8Y","playerVars":{"rel":0,"fs":1}}'>
        
        <source type="image/webp" sizes="100vw" 
                srcset="https://i.ytimg.com/vi_webp/lBTCB7yLs8Y/maxresdefault.webp 1280w, 
                        https://i.ytimg.com/vi_webp/lBTCB7yLs8Y/hqdefault.webp 640w, 
                        https://i.ytimg.com/vi_webp/lBTCB7yLs8Y/mqdefault.webp 480w, 
                        https://i.ytimg.com/vi_webp/lBTCB7yLs8Y/sddefault.webp 320w">
                        
        <img src="https://i.ytimg.com/vi/lBTCB7yLs8Y/hqdefault.jpg" 
             sizes="100vw" 
             srcset="https://i.ytimg.com/vi/lBTCB7yLs8Y/maxresdefault.jpg 1280w, 
                     https://i.ytimg.com/vi/lBTCB7yLs8Y/hqdefault.jpg 640w, 
                     https://i.ytimg.com/vi/lBTCB7yLs8Y/mqdefault.jpg 480w, 
                     https://i.ytimg.com/vi/lBTCB7yLs8Y/sddefault.jpg 320w" 
             alt="Vidéo YouTube" 
             loading="lazy" 
             class="img-fluid magix-ytb-cover lazyload">
             
    </picture>
</div>

3. Avantages majeurs

• Performance SEO : Réduction drastique du poids de la page.

• Responsivité : Intégration parfaite dans la grille Bootstrap.

• Conformité RGPD : Aucun cookie tiers n'est déposé tant que l'utilisateur n'a pas manifesté son intention de visionner la vidéo par un clic.

• Expérience utilisateur : Suppression des saccades au défilement (CLS) grâce à la réservation de l'espace d'affichage.