Атрибут allowfullscreen тега <iframe>
Описание
Атрибут allowfullscreen позволяет элементу <iframe> переходить в полноэкранный режим при вызове соответствующего JavaScript API. Это булевый атрибут - его наличие (без значения) активирует возможность полноэкранного режима.
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
allowfullscreen
width="560"
height="315">
</iframe>
Особенности работы:
| Состояние | Описание | Как задать |
|---|---|---|
| Разрешено | Контент может быть развернут на весь экран | <iframe allowfullscreen> или <iframe allowfullscreen="true"> |
| Запрещено | Полноэкранный режим недоступен (по умолчанию) | <iframe> (без атрибута) |
Программное управление:
<iframe
id="video-frame"
src="video-player.html"
width="640"
height="360">
</iframe>
<button onclick="requestFullscreen()">На весь экран</button>
<script>
function requestFullscreen() {
const iframe = document.getElementById('video-frame');
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
}
}
</script>
Рекомендации по использованию:
- Используйте для видео-плееров, карт и интерактивного контента
- Убедитесь, что встроенный контент поддерживает полноэкранный режим
- Сочетайте с атрибутом
allowдля более тонкого контроля - Для безопасности браузер может запрашивать подтверждение пользователя
Пример с дополнительными разрешениями:
<iframe
src="https://example.com/interactive-app"
allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
width="800"
height="600">
</iframe>
Стилизация в полноэкранном режиме:
<style>
iframe:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
}
iframe:-moz-full-screen {
width: 100% !important;
height: 100% !important;
}
</style>
Ограничения и совместимость:
- Поддерживается во всех современных браузерах
- Требуется для YouTube и других видео-сервисов
- Безопасность: работает только по действию пользователя (клик, нажатие)
- Может быть заблокировано политиками безопасности страницы
Примечание: Атрибут allowfullscreen критически важен для медиа-контента. Для современных приложений рассмотрите также использование атрибута allow с более детальными разрешениями.