• Resolved nc_nc

    (@nc_nc)


    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)
  • Thread Starter nc_nc

    (@nc_nc)

    I now got it working just the way I want it. Here html 5 inside iFrame – parent still in html 4.01 transition.

Viewing 1 replies (of 1 total)
  • The topic ‘full screen call from within iFrame’ is closed to new replies.