Как сделать полноэкранное видео, когда оно помещено внутри iframe?

Я использую настройки по умолчанию для своего проигрывателя mediaelement.js, и моя инициализация очень проста: $('video').mediaelementplayer();

Мой вопрос: Возможно ли полноэкранное воспроизведение проигрывателя, когда видео встроено в iframe? Когда я нажимаю полноэкранный режим, видео максимизируется до iframe, но не для всего экрана. Это ограничение html или есть способ обойти его?

Общая структура выглядит следующим образом:

<!DOCTYPE html>
<html>
  <head />
  <body>
    <iframe>
      <!DOCTYPE html>
      <html>
        <head />
        <body>
          *My Video Here <video> ...*
        <body>
      </html>
    </iframe>
  </body>
</html>

Спасибо!

EDIT: Кажется, это специфический игрок. Реализация html5 <video> по умолчанию максимизирует полноэкранный режим даже в пределах iframe.

Ответ 1

Наткнулся на это на video.js:

video.js внутри модального окна: полноэкранный режим не работает

И ответ заключается в том, чтобы добавить эти атрибуты в iframe: <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> (хотя поддержка IE не поддерживается)

Ответ 2

Я использую этот бит кода, чтобы отслеживать, прошло ли видео в полноэкранном режиме:

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
    // Your code here
    this.enterFullScreen_org();
}
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
    // Your code here
    this.exitFullScreen_org();
}

Я предполагаю, что вы можете вызвать этот вызов на родительской странице, чтобы увеличить iframe?

Ответ 3

Вот "хакерское" решение, которое даже ускорит загрузку вашей страницы.

1) Создайте изображение (обычно снимок экрана) вместо iFrame.

2) Привяжите обработчик события клика к изображению, чтобы он создавал iFrame для требуемых размеров. (Эти размеры можно использовать для размера окна клиента).

Ответ 4

Мой клиент уже довольствовался ограниченной шириной экрана в полноэкранном режиме - это были только черные полосы выше и ниже, от которых мне пришлось избавиться. (в моем случае размеры iFrame составляли 945 × 1500).

Это, я мог бы исправить чисто немного CSS.

.mejs-container-fullscreen {
    background-color: #fff !important;
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    height: 530px !important;
    top: 500px !important;
}

.mejs-container.mejs-container-fullscreen .mejs-controls {
    bottom: auto !important;
    top: 1000px !important; /* video top + video height - controls height (30px) */
}

По общему признанию, это довольно ограниченное решение, и оно сильно зависит от размера видео (и согласованности размеров для нескольких видео), а также от цвета фона. Но это может сработать и для вас.