Fullscreen broken: video only 150px high

bobvanvliet commented 4 years ago

I have an interactive video online using the instructions posted in issue 45, but the fullscreen seems to be broken.

The toolbar is full width, but the video is only 150px high :-/

See the page here.

Issue appears in both firefox and chrome.

HTML is only slightly changed from the example posted by sr258 (added some css to keep the video smaller by default, see below). But I tested it without the added <style> section and the problem persists.

<html>

<head>
    <title>Interactieve Video</title>
    <meta charset="utf-8" />
    <script src="main.bundle.js" type="text/javascript"></script>
    <style>
        body {
            background-color: #000;
            padding: 3vw;
            max-width: 60em;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id='h5p-container'></div>
    <script type="text/javascript">
        const el = document.getElementById('h5p-container');
        const h5pLocation = './workspace';
        const h5p = new H5PStandalone.H5P(el, h5pLocation);
    </script>
</body>

DisserM commented 4 years ago

I had the same problem and came up with a very dirty quickfix:

In the main html file index html I added the .js script at the end of the html body, after the h5p Container is initialized.

<!--fix fullscreen-->
    <script src="fixFullscreen.js" type="text/javascript"></script>

the fixFullscreen.js file includes a callback function :

const el = document.getElementById('h5p-container');

var interval = window.setInterval(myCallback, 50);

function myCallback() {
    fixFullscreen();
}

//fix fullscreen

function fixFullscreen(){
    //el is the "h5pContainer"
    //the 1 childnode of it is the "h5p-iframe-wrapper"
    if (el.childNodes[0]) {
        //when the wrapper is set to the fullscreen, its gets the additional classname "h5p-fullscreen"
        // you only want to change the iframe height, when its in fullscreen 
        if (el.childNodes[0].classList.contains("h5p-fullscreen")) {
            //the second childnote if the wrapper is the actual Iframe
            if (el.childNodes[0] && el.childNodes[0].childNodes[1]) {
                    //setting the iframe height to 100%
                    el.childNodes[0].childNodes[1].style.height = "100%";    
                }
            }
        }
    }

to be honest I looked at theframe.bundle.jsfile and tried to figure it out where the fullscreen is triggered to run my script from there, but im a bit of a js Noob so I didnt figure it out and just trigger the callback function every 50 ms :D

If someone could add better solution, I would probably take that

bobvanvliet commented 4 years ago

Thank you @DisserM! This worked, messy as it is.

Looks very much like a fix of my own for a sizing issue (I think due to a race condition with loading the video) where the control-bar for the interactive video drops out of sight below the lower border of the iframe:

<script>
    function fireResize() {
        window.dispatchEvent(new Event('resize'));
    }
    window.addEventListener('load', (event) => {
        window.setInterval(fireResize,1000);
    });
</script>

Jakeii commented 3 years ago

Sorry for the late reply, we ran into this issue over at https://github.com/tunapanda/wikonnect/pull/265 a while ago, the solution was to include dist/styles/h5p.css where you are rendering the H5P.

bobvanvliet commented 3 years ago

Thank you @Jakeii !

Fixed.

tunapanda / h5p-standalone

Fullscreen broken: video only 150px high #51