<!DOCTYPE html> <html lang="en"> <head>

 <meta charset="UTF-8">
 <title>H5P Test Page</title>
 <style>
   /* Minimal styling for H5P wrapper */
   .h5p-wrapper {
     width: auto !important;
     height: 300px !important; /* privremena visina */
     font-size: 14px !important;
     border: 1px solid #ccc;
     margin: 20px auto;
   }

   body {
     font-family: Arial, sans-serif;
     padding: 20px;
   }
 </style>

</head> <body>

H5P Test Container

 <iframe
   class="h5p-iframe"
   src="https://your-h5p-url/h5p-525"
   width="100%"
   height="300"
   frameborder="0"
   allowfullscreen
 ></iframe>

 <script>
   // Privremena JS da popup visinu dok H5P ne load-uje
   function fixH5PWrapper() {
     document.querySelectorAll('iframe.h5p-iframe').forEach(iframe => {
       try {
         const doc = iframe.contentDocument || iframe.contentWindow.document;
         if (!doc) return;

         const wrapper = doc.querySelector('.h5p-wrapper');
         if (!wrapper) return;

         console.log('H5P wrapper found:', wrapper);

         const height = parseFloat(wrapper.style.height);
         const fontSize = parseFloat(wrapper.style.fontSize);

         if (!height || height < 20 || !fontSize || fontSize < 5) {
           wrapper.style.height = '300px';
           wrapper.style.fontSize = '14px';
           console.log('Wrapper style updated');
         }
       } catch(e) {
         console.warn('Cannot access iframe (cross-origin?):', e);
       }
     });
   }

   // Check mehrfach, da iframe loading verzögert sein kann
   setTimeout(fixH5PWrapper, 300);
   setTimeout(fixH5PWrapper, 800);
   setTimeout(fixH5PWrapper, 1500);
 </script>

</body> </html>

Test Marko

H5P Test Container