Partage IA

<div class="container-fluid p-0 my-3">
                    <iframe class="auto-resize-iframe" 
                            src="URL_DE_VOTRE_RESSOURCE_HTML_ICI" 
                            title="Contenu pédagogique"
                            style="width: 100%; height: 300px; border: none; overflow: hidden; display: block;">
                    </iframe>
                </div>
                <script>
                (function() {
                    document.addEventListener("DOMContentLoaded", function() {
                        const iframes = document.querySelectorAll('.auto-resize-iframe');
                        const margeSecurite = 25; 
                        
                        iframes.forEach(iframe => {
                            iframe.addEventListener('load', function() {
                                try {
                                    const iframeDoc = iframe.contentWindow.document;
                                    
                                    // LE VERROU : empêche le script de s'auto-déclencher en boucle
                                    let isAdjusting = false;
                                    
                                    const ajusterHauteur = () => {
                                        if (isAdjusting) return;
                                        isAdjusting = true;
                                        
                                        // 1. On repasse temporairement en 'auto' pour couper l'effet d'étirement du CSS
                                        iframe.style.height = 'auto';
                                        
                                        // 2. On mesure la vraie hauteur naturelle du contenu
                                        const hauteurContenu = Math.max(
                                            iframeDoc.body.scrollHeight, 
                                            iframeDoc.documentElement.scrollHeight
                                        );
                                        
                                        // 3. On applique la bonne taille avec la marge
                                        iframe.style.height = (hauteurContenu + margeSecurite) + 'px';
                                        
                                        // 4. On relâche le verrou après un micro-délai pour laisser le DOM se stabiliser
                                        setTimeout(() => {
                                            isAdjusting = false;
                                        }, 50);
                                    };
                                    // Ajustement initial
                                    ajusterHauteur();
                                    // Observation des changements du contenu
                                    const resizeObserver = new ResizeObserver(() => {
                                        ajusterHauteur();
                                    });
                                    
                                    resizeObserver.observe(iframeDoc.body);
                                    
                                } catch (error) {
                                    console.warn("Impossible d'ajuster l'iframe dynamiquement : ", error);
                                    iframe.style.height = "750px"; 
                                    iframe.style.overflow = "auto";
                                }
                            });
                            
                            if (iframe.contentWindow && iframe.contentWindow.document.readyState === 'complete') {
                                iframe.dispatchEvent(new Event('load'));
                            }
                        });
                    });
                })();
                </script>