Как можно активировать полноэкранный режим для VKVideo, размещенного внутри iframe с использованием атрибута srcdoc? 

Здравствуйте! 

На сайте добавлен iframe с элементом ВКВидео. Внутри этого iframe используется атрибут srcdoc, позволяющий загружать внутреннее содержимое только после клика пользователя. Видео воспроизводится нормально, однако кнопка "развернуть на весь экран" внутри видео недоступна. 

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

Как можно использовать srcdoc, чтобы сделать кнопку "развернуть на весь экран" доступной для видео? 

Аналогичный код с YouTube работает корректно. 

Вот код iframe, который используется на сайте: 

```html
<div id="vkvideo" class="full-width full-height">
<iframe class="full-screen" allowfullscreen allow='autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;' frameborder="0" 
src='https://vkvideo.ru/video_ext.php?oid=134951081&amp;id=456239040&amp;hd=4&amp;autoplay=1&amp;repeat=1&amp;can_repost=1'
srcdoc="&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font-size:128pt;font-size:15vmax;color:red;text-shadow:0 0 0.5em black} #bckgrndimg {object-fit: cover;height: 100%; width: 100%;} #bckgrndimgwrppr {height: 100vh; width: 100%;}&lt;/style&gt;&lt;a
href='https://vkvideo.ru/video_ext.php?oid=134951081&amp;id=456239040&amp;hd=4&amp;autoplay=1&amp;repeat=1&amp;can_repost=1'
&gt;&lt;div id=bckgrndimgwrppr&gt;&lt;img id=bckgrndimg src='https://vkinelru.github.io/3d/photos/1440x/0011-08-debarrel-Singapur-VKinel.ru.webp'
alt='Посмотрите видео ВКинельРу'
&gt
```
  • 10 января 2025 г. 15:34
Ответы на вопрос 2 
Для того чтобы активировать полноэкранный режим для видео ВКонтакте, размещенного внутри `iframe` с использованием атрибута `srcdoc`, вам необходимо учитывать несколько моментов.

К сожалению, многие видео-плееры могут иметь ограничения по полному экрану в `iframe`, особенно если они загружены через `srcdoc`. В вашем случае, когда вы используете атрибут `srcdoc`, кнопка для перехода в полноэкранный режим может не работать из-за ограничений безопасности и правил браузеров.

Вот несколько способов, которые могут помочь:

1. **Полноэкранный режим без использования `srcdoc`:** Если возможно, попробуйте использовать прямую ссылку (`src`) на видео без использования `srcdoc`. Это может увеличить время загрузки, но избавит от проблем с полноэкранным режимом.

2. **Использование JavaScript:** В некоторых случаях вы можете попробовать программно вызвать полноэкранный режим с помощью JavaScript. Однако это работает не всегда:

    ```javascript
    const iframe = document.querySelector('iframe');
    iframe.requestFullscreen().catch(err => {
        console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
    ```

3. **Атрибуты `allowfullscreen` и `fullscreen`:** Убедитесь, что в вашем `iframe` присутствует атрибут `allowfullscreen` и что корректно переданы все необходимые разрешения:

    ```html
    allowfullscreen
    ```

4. **Проверка на серверной стороне:** Если у вас есть доступ к настройкам или API ВКонтакте, убедитесь, что настройки безопасности или CORS не блокируют возможности полноэкранного режима.

5. **Пользовательская загрузка:** Возможно, имеет смысл загружать видео по клику на элемент (например, кнопку), вызвав `src` `iframe` только тогда, когда пользователь действительно хочет его видеть. Это может уменьшить время загрузки основной страницы.

Пример кода для загрузки видео по клику:

```html
<div id="vkvideo" class="full-width full-height">
    <button id="load-video">Загрузить видео</button>
    <iframe id="video-iframe" class="full-screen" allowfullscreen 
        style="display:none;" frameborder="0"></iframe>
</div>
<script>
    document.getElementById('load-video').addEventListener('click', function() {
        const iframe = document.getElementById('video-iframe');
        iframe.src = 'https://vkvideo.ru/video_ext.php?oid=134951081&amp;id=456239040&amp;hd=4&amp;autoplay=1&amp;repeat=1&amp;can_repost=1';
        iframe.style.display = 'block';
    });
</script>
```

8. **Проверка на других браузерах:** Попробуйте протестировать ваше видео на разных браузерах и устройствах. Разные браузеры могут иметь разные ограничения по полноэкранному режиму.

Если ничего из вышеперечисленного не сработает, к сожалению, придется смириться с тем, что некоторые платформы могут просто не поддерживать полноценный полноэкранный режим через `iframe` с использованием `srcdoc`.
укажи в iframe у атрибута fullscreen ="true"
Похожие вопросы
    Показать ещё