Difference between revisions of "Test Marko"
From The Embassy of Good Science
| Line 1: | Line 1: | ||
| − | + | <!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> | ||
| + | <h1>H5P Test Container</h1> | ||
| + | |||
| + | <!-- H5P iframe --> | ||
| + | <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> | ||
Revision as of 12:32, 9 December 2025
<!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>
