Fullbrowser Fallback

Viewers can watch video content in fullscreen mode by clicking the fullscreen button in the control bar (learn more about the control bar settings).

However, fullscreen is not supported in the following cases:

1. Javascript embedded interactive content on iOS (mobile) devices
2. Iframe embedded interactive and non-interactive video on iOS (mobile) devices
3. Iframe embedded content without the allowfullscreen property

In the first scenario the player will attempt a ‘fullbrowser’ alternative, in which case the player will try to fill the entire browser window.

In the second and third case, the player is unable (i.e. not allowed) to execute a fullbrowser alternative. An additional script is needed for the player to execute a fullbrowser action.

Use one of these ways to include the additional script on your page:

1. Embed a script tag on your page
2. Include additional Javascript in the source code

1.0 | Embed a script tag

Paste the following script tag into your HTML:

<script type="text/javascript" src="https://bbvms.com/scripts/iframe-fullscreen.js" async="true"></script>

2.0 | Add Javascript to source code

Alternatively, add the following Javascript to your source code.

(function () {
    window.addEventListener('message', function(event) {
        if (event.origin && event.origin.indexOf('bbvms.com') !== -1) {
            var srcIframe = getSrcIframeFromEvent(event);
            // the Blue Billywig player will send a handshake event to establish two-way communication. Reply with a handshakeSucceeded postMessage, to let the player know you are listening.
            if (event.data === 'handshake') {
                event.source.postMessage('handshakeSucceeded', event.origin);
            } else if (event.data === 'fullbrowser') {
                // stretch iframe to fit the browserwindow
                bbFullBrowser(srcIframe);
            } else if (event.data === 'fullbrowser-off') {
                // restore the iframe's original dimensions
                bbExitFullBrowser(srcIframe);
            }
        }
    });

    // Detections
    var isiPhone = navigator.userAgent.toLowerCase().match(/iphone/i) !== null
    var iOSVersion = parseFloat(
        ('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,
            ''
        ])[
            1])
        .replace('undefined', '3_2')
        .replace('_', '.')
        .replace('_', '')
    ) || -1;
    var isIOSVersion13plus = isiPhone && iOSVersion >= 13;
    function getSrcIframeFromEvent(event) {
        return [].slice.call(document.getElementsByTagName('iframe')).filter(function(iframe) {
            return iframe.contentWindow === event.source;
        })[0];
    }

    // Function to simulate fullscreen / fullbrowser button in control bar
    function bbFullBrowser(bbIframe) {
        if (!bbIframe || bbIframe.oldStyle) return; // oldStyle already set, prevent overwriting it
        if (!bbIframe.style) bbIframe.style = {};
        var oldStyle = bbIframe.oldStyle = {};
        // Storing initial iframe styling in object
        oldStyle.position = bbIframe.style.position;
        oldStyle.top = bbIframe.style.top;
        oldStyle.left = bbIframe.style.left;
        oldStyle.zIndex = bbIframe.style.zIndex;
        oldStyle.width = bbIframe.style.width;
        oldStyle.height = bbIframe.style.height;
        oldStyle.padding = bbIframe.style.padding;
        oldStyle.margin = bbIframe.style.margin;

        // Apply fullbrowser styling to the iframe
        bbIframe.style.position = 'fixed';
        bbIframe.style.top = '0';
        bbIframe.style.left = '0';
        bbIframe.style.padding = '0';
        bbIframe.style.margin = '0';
        bbIframe.style.zIndex = '2147483647'; // Maximum z-index range 
        bbIframe.style.width = '100vw';
        bbIframe.style.height = isIOSVersion13plus ? 'calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top))' : '100vh';
    }

    function bbExitFullBrowser(bbIframe) {
        if (!bbIframe || !bbIframe.oldStyle) return;
        var oldStyle = bbIframe.oldStyle;
        // Revert to initial iframe styling
        bbIframe.style.position = oldStyle.position;
        bbIframe.style.top = oldStyle.top;
        bbIframe.style.left = oldStyle.left;
        bbIframe.style.zIndex = oldStyle.zIndex;
        bbIframe.style.width = oldStyle.width;
        bbIframe.style.height = oldStyle.height;
        bbIframe.oldStyle = null;
    }

    // To manually exit fullbrowser mode, call this method with the iframe HtmlElement.
    window.bbCallExitFullBrowser = function (bbIframe) {
        if (bbIframe && bbIframe.contentWindow && bbIframe.contentWindow.postMessage) bbIframe.contentWindow.postMessage('parentCancelFullscreen', '*');
    }
})();