lookit-exp-video issues with video controls and fullscreen issues

[ianchandlercampbell]

I'm having an issue on Firefox with the exp-lookit-video frame where it starts the video outside of fullscreen (possibly from me exiting previously), but when I click "return to fullscreen" the giant "return to fullscreen" bar will not disappear. I have to pause and unpause the frame entirely to remove the giant green bar. Also, "controls": true does not provide video player controls in the frame.

My JSON is below (this uses a public link to an OSF file and should work fine in testing):

{
    "frames": {
        "GARDEN-Intro-Video": {
            "kind": "exp-lookit-video",
            "video": {
                "source": "GARDEN_Module0_v10_opt.mp4",
                "loop": false,
                "position": "fill"
            },
            "autoProceed": false,
            "controls": true,
            "backgroundColor": "black",
            "nextButtonText": "Play the game!",
            "requiredDuration": 0,
            "requireVideoCount": 1,
            "doRecording": false,
            "parentTextBlock": {
                "text": "\n \n Press the space bar if you need to restart the video!"
            },
            "baseDir": "https://files.osf.io/v1/resources/pxcg8/providers/osfstorage/652d5d4613d27b066f94cf9d?direct=&mode=render",
            "videoTypes": [
                "webm",
                "mp4"
            ]
        },
        "GARDEN-Proceed": {
            "kind": "exp-lookit-survey-consent",
            "title": "You can now get started on Project GARDEN! \n",
            "items": [{
                    "kind": "text-block",
                    "text": "If you have further questions or need to contact us, please visit: \n https://childrenhelpingscience.com/garden/ \n\n"
                },
                {
                    "kind": "checkbox-item",
                    "text": "I understand that my child and I will need to be present for each study and we will need a computer or laptop with a webcam to participate. \n\n"
                },
                {
                    "kind": "checkbox-item",
                    "text": "I understand that my child and I can participate at any time and that Project GARDEN will offer eight studies over time. \n\n"
                },
                {
                    "kind": "checkbox-item",
                    "text": "I am ready to have access to the first study in Project GARDEN.\n"
                }

            ]
        }
    },
    "sequence": [
        "GARDEN-Intro-Video",
        "GARDEN-Proceed"
    ]
}

[becky-gilbert]

A few notes about this issue:

1. The reason that controls: true wasn't working is because it needs to go inside the video object (along with the source and other video-specific parameters).
2. The video frame always displays in fullscreen mode, so because of browser rules about automatically entering fullscreen, it shouldn't be the first frame in a sequence. Instead, it needs to come after another frame that includes a 'next' button click to continue (see the display section in the docs). This will help to make sure that the participant is already in fullscreen mode when they start the video frame or is allowed to enter fullscreen when the frame starts, thus making it less likely that they encounter this problem.

That said, we still need to investigate and fix the problem with re-entering fullscreen mode: if the participant exits fullscreen mode before/during the video frame and then enters again, the green 'return to fullscreen' banner should disappear and the video frame should continue to work.