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:
- Javascript embedded interactive content on iOS (mobile) devices
- Iframe embedded interactive and non-interactive video on iOS (mobile) devices
- 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:
- Embed a script tag on your page
- 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', '*'); } })();