full screen call from within iFrame
-
I have multiple players in iFrames. All works well, except for the full screen button. Would a target=”_parent” do the trick, or is there a better way to handle this?
The function called is:
fullscreenBtn.addEventListener('click', function () { var isFullScreen = Features.HAS_TRUE_NATIVE_FULLSCREEN && Features.IS_FULLSCREEN || player.isFullScreen; if (isFullScreen) { player.exitFullScreen(); } else { player.enterFullScreen(); }
enterFullScreen: function enterFullScreen() { var t = this, isNative = t.media.rendererName !== null && /(html5|native)/i.test(t.media.rendererName), containerStyles = getComputedStyle(t.getElement(t.container)); if (!t.isVideo) { return; } if (t.options.useFakeFullscreen === false && Features.IS_IOS && Features.HAS_IOS_FULLSCREEN && typeof t.media.originalNode.webkitEnterFullscreen === 'function' && t.media.originalNode.canPlayType((0, _media.getTypeFromFile)(t.media.getSrc()))) { t.media.originalNode.webkitEnterFullscreen(); return; } (0, _dom.addClass)(_document2.default.documentElement, t.options.classPrefix + 'fullscreen'); (0, _dom.addClass)(t.getElement(t.container), t.options.classPrefix + 'container-fullscreen'); t.normalHeight = parseFloat(containerStyles.height); t.normalWidth = parseFloat(containerStyles.width); if (t.fullscreenMode === 'native-native' || t.fullscreenMode === 'plugin-native') { Features.requestFullScreen(t.getElement(t.container)); if (t.isInIframe) { setTimeout(function checkFullscreen() { if (t.isNativeFullScreen) { var percentErrorMargin = 0.002, windowWidth = _window2.default.innerWidth || _document2.default.documentElement.clientWidth || _document2.default.body.clientWidth, screenWidth = screen.width, absDiff = Math.abs(screenWidth - windowWidth), marginError = screenWidth * percentErrorMargin; if (absDiff > marginError) { t.exitFullScreen(); } else { setTimeout(checkFullscreen, 500); } } }, 1000); } } t.getElement(t.container).style.width = '100%'; t.getElement(t.container).style.height = '100%'; t.containerSizeTimeout = setTimeout(function () { t.getElement(t.container).style.width = '100%'; t.getElement(t.container).style.height = '100%'; t.setControlsSize(); }, 500); if (isNative) { t.node.style.width = '100%'; t.node.style.height = '100%'; } else { var elements = t.getElement(t.container).querySelectorAll('embed, object, video'), _total = elements.length; for (var i = 0; i < _total; i++) { elements[i].style.width = '100%'; elements[i].style.height = '100%'; } } if (t.options.setDimensions && typeof t.media.setSize === 'function') { t.media.setSize(screen.width, screen.height); } var layers = t.getElement(t.layers).children, total = layers.length; for (var _i = 0; _i < total; _i++) { layers[_i].style.width = '100%'; layers[_i].style.height = '100%'; } if (t.fullscreenBtn) { (0, _dom.removeClass)(t.fullscreenBtn, t.options.classPrefix + 'fullscreen'); (0, _dom.addClass)(t.fullscreenBtn, t.options.classPrefix + 'unfullscreen'); } t.setControlsSize(); t.isFullScreen = true; var zoomFactor = Math.min(screen.width / t.width, screen.height / t.height), captionText = t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-text'); if (captionText) { captionText.style.fontSize = zoomFactor * 100 + '%'; captionText.style.lineHeight = 'normal'; t.getElement(t.container).querySelector('.' + t.options.classPrefix + 'captions-position').style.bottom = (screen.height - t.normalHeight) / 2 - t.getElement(t.controls).offsetHeight / 2 + zoomFactor + 15 + 'px'; } var event = (0, _general.createEvent)('enteredfullscreen', t.getElement(t.container)); t.getElement(t.container).dispatchEvent(event); },
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘full screen call from within iFrame’ is closed to new replies.