Отследить fullscreen и вывести свой html

Question

Представим ситуацию, что у нас есть сторонний плеер, который выводится через <iframe>.

Можно ли отследить включенный fullscreen и поверх его вывести свой код.

Условный код:

.fullscreen {
  display: none;
}

<!-- div ниже вывести поверх fullscreen -->
<div class="fullscreen">
  <img src="https://i.imgur.com/j4nfA4c.png">
</div>

<iframe width="320" height="220" src="https://www.youtube.com/embed/10ZVYT2DdUY" frameborder="0" allow="encrypted-media; picture-in-picture" allowfullscreen></iframe>

Answer 1

Столкнувшись с этой проблемой вновь, я нашёл решение в библиотеке screenfull.

document.addEventListener('DOMContentLoaded', () => {
    const full = document.querySelector('.for-fullscreen');
    const btn = document.querySelector('.for-fullscreen__btn');
    
    btn.addEventListener('click', () => {
        if(screenfull.isEnabled) {
            screenfull.request(fill, {navigationUI: 'hide'});
        } else return false;
    });

    screenfull.on('change', () => {
        screenfull.isFullscreen ? full.classList.add('for-fullscreen--fullscreen') : full.classList.remove('for-fullscreen--fullscreen');
    });
});

iframe {
        display: block;
        border: 0;
        max-width: 100%;
      }
      .for-fullscreen {
        display: inline-block;
        max-width: 100%;
        position: relative;
      }
      .for-fullscreen__btn {
        display: block;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 6px;
        background-color: #ccc;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 75% auto;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
      }
      .for-fullscreen__btn:hover,
      .for-fullscreen__btn:active {
        background-color: #ddd;
      }
      .for-fullscreen__btn--open {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewbox='0 0 20 20'%3E%3Cpath fill='%23000' d='M1 1l5 0-2 2 4 4-1 1-4-4-2 2zM19 1l-5 0 2 2-4 4 1 1 4-4 2 2zM19 19l0-5-2 2-4-4-1 1 4 4-2 2zM1 19l5 0-2-2 4-4-1-1-4 4-2-2z'/%3E%3C/svg%3E");
      }
      .for-fullscreen__btn--close {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewbox='0 0 20 20'%3E%3Cpath fill='%23000' d='M8 8l0-5-2 2-4-4-1 1 4 4-2 2zM12 8l0-5 2 2 4-4 1 1-4 4 2 2zM12 12l5 0-2 2 4 4-1 1-4-4-2 2zM8 12l0 5-2-2-4 4-1-1 4-4-2-2z'/%3E%3C/svg%3E");
      }
      .for-fullscreen--fullscreen {
        width: 100%;
      }
      .for-fullscreen--fullscreen iframe {
        width: 100%;
        height: 100%;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.1.0/screenfull.min.js"></script>

<div class="for-fullscreen">
  <iframe src="https://resume.minov.pw" width="666" height="300"></iframe>
  <button class="for-fullscreen__btn for-fullscreen__btn--open" type="button"></button>
</div>

В сниппете пример работать не будет, лучше смотреть тут - ссылка.

БЛОГ НА HUSL

Отследить fullscreen и вывести свой html

Ответы (1 шт):