Iframe полноэкранный режим для адаптивного разрешения экрана и модальности портрета планшета - PullRequest
Новая
       4

Iframe полноэкранный режим для адаптивного разрешения экрана и модальности портрета планшета

0 голосов
/ 16 мая 2019

Я написал код для управления отзывчивым полноэкранным iframe.Это работает почти хорошо :).Проблема в том, что существует разрешение экрана, например, 1680x1050 (см. picture ).Поэтому в этом случае я бы хотел переместить элемент iframe в центр экрана с тем же черным фоном сверху и снизу.Добавить, с тем же CSS, я хотел бы сделать это, когда iframe находится в полноэкранном режиме на портретной модальности на планшете. 

.FullScreen {
  &-target {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    width: 100vw;
    height: 100vh;
    background: #0a0a0a;
  }

  &-button {
    cursor: pointer;
    font-size: 40px;

    &--active {
/*....
....*/
      }
    }
  }
}
<div class="mne-contentBorder js-fullscreen-target FullScreen-target">
      <div class="myEMLObj">
      <div class="EMLObj-wrapper">
          <img class="EMLObj-placeholder" src="data:image/gif;">
          <iframe class="myObject-Iframe js-Iframe" src="" name="Iframe" frameborder="0"></iframe>
      </div>
  </div>
</div>

Не заботьтесь о белом прямоугольнике в ifame, просто сфокусируйтесь на черном фоне, вызванном разрешением экрана

для планшета

1 Ответ

1 голос
/ 16 мая 2019

Попробуйте добавить CSS для iframe 

iframe{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}
...