Как встроить 3D-тур Matterport на сайт через iframe — полная инструкция 2026

Что такое iframe и зачем он нужен для 3D-тура

iframe — это HTML-тег, который встраивает одну веб-страницу внутрь другой. Для 3D-тура это значит, что посетитель сайта видит интерактивную панораму прямо на странице объекта, не уходя на сторонний домен. Тур загружается с серверов хостинга (например, MatterHub), а на сайте отображается как обычный блок контента — между текстом и фотогалереей.

Альтернатив iframe сейчас фактически нет. WebGL-плееры Matterport устроены так, что их нельзя просто вставить как <video> или <img> — это полноценное веб-приложение, которому нужен изолированный контекст. Поэтому iframe остаётся стандартным способом интеграции, и так делают все площадки, работающие с Matterport-турами.

Базовый код iframe для встраивания тура

Минимальный рабочий код выглядит так:

<iframe
  src="https://my.matterhub.ru/show/?m=ВАШ_ID_ТУРА"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  allow="xr-spatial-tracking; gyroscope; accelerometer"
  loading="lazy">
</iframe>

Разберём атрибуты по одному:

• src — ссылка на тур, выдаётся хостингом
• width="100%" — тур растягивается на всю ширину родительского блока
• height="600" — фиксированная высота в пикселях, дальше покажем как сделать адаптивной
• allowfullscreen — разрешает полноэкранный режим
• allow="xr-spatial-tracking; gyroscope; accelerometer" — нужно для VR-режима и работы на мобильных с гироскопом
• loading="lazy" — тур загрузится только когда посетитель прокрутит до него, а не сразу при открытии страницы

Адаптивный iframe с сохранением пропорций 16:9

Фиксированная высота в пикселях — это плохо. На широком мониторе тур будет узкой полоской, на мобильном — наоборот, слишком высоким и обрезанным. Правильнее задавать высоту через соотношение сторон. Самый простой способ в 2026 году — CSS-свойство aspect-ratio:

<div style="position: relative; width: 100%; aspect-ratio: 16/9;">
  <iframe
    src="https://my.matterhub.ru/show/?m=ВАШ_ID_ТУРА"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
    allowfullscreen
    allow="xr-spatial-tracking; gyroscope; accelerometer"
    loading="lazy">
  </iframe>
</div>

Этот блок автоматически масштабируется: на десктопе будет широким, на мобильном — пропорционально уменьшится, сохранив соотношение 16:9. Свойство aspect-ratio поддерживается всеми современными браузерами начиная с 2021 года.

Рекомендуемые размеры iframe под разные устройства

Устройство	Минимальная ширина	Соотношение сторон	Комментарий
Десктоп (карточка объекта)	800px	16:9	Стандартный размер для блока внутри статьи
Десктоп (на всю ширину)	1200px+	16:9 или 21:9	Для главной страницы или лендинга
Планшет	100% ширины родителя	16:9	Адаптивный режим автоматически подстроится
Мобильный	100% ширины экрана	4:3 или 16:9	На вертикальном экране 16:9 тоже работает корректно
Полноэкранный режим	весь экран	по экрану	Включается кнопкой fullscreen внутри плеера

Если тур встроен в карточку товара или объекта недвижимости, в большинстве случаев подходит 16:9. Для лендингов с акцентом на интерьер иногда лучше 21:9 — кинематографичное соотношение, тур выглядит как баннер.

Как получить ссылку на тур для встраивания

Каждый хостинг Matterport-туров даёт свой формат ссылки. Принцип везде одинаковый:

1. Залить тур через панель управления хостинга (обычно перетаскиванием папки с туром или ZIP-архивом)
2. Дождаться обработки — обычно от 5 до 30 минут в зависимости от размера тура
3. Открыть карточку тура в панели — там будет либо готовый код iframe, либо ссылка вида https://домен/show/?m=ID
4. Скопировать и вставить в HTML страницы

Если вы только планируете заказ съёмки и хостинга — посчитать стоимость можно через калькулятор, а оформить заказ съёмки — через страницу 3D-тур.

Частые ошибки при встраивании iframe

Тур грузится при открытии страницы и тормозит её. Решение — атрибут loading="lazy". Тур начнёт загружаться, только когда посетитель прокрутит до него.

На мобильных тур обрезается или не работает свайп. Решение — убедиться, что в allow есть gyroscope; accelerometer, и что вокруг iframe нет CSS-обёрток с overflow: hidden или touch-action: none.

Полноэкранный режим не включается. Чаще всего забыли атрибут allowfullscreen. Без него браузер блокирует переход в fullscreen.

Тур не открывается, в консоли ошибка X-Frame-Options. Это значит, что хостинг тура запрещает встраивание на сторонние сайты. Уточняйте у хостинг-провайдера разрешено ли встраивание — у большинства российских хостингов оно открыто по умолчанию.

Звук в туре не работает. Современные браузеры блокируют автозапуск звука. Звук включится после первого клика посетителя по плееру — это поведение браузера, а не бага плеера.

SEO-нюансы при встраивании туров

Контент внутри iframe поисковиками индексируется отдельно — Яндекс и Google не считают его частью основной страницы. Поэтому рядом с туром на странице обязательно должен быть текстовый контент: описание объекта, характеристики, преимущества. Без текста страница с одним только встроенным туром не получит хорошие позиции.

Хорошая практика — добавить под iframe заголовок <h2>, абзац-описание тура, и атрибут title к самому iframe для скринридеров и поисковых ботов:

<iframe title="3D-тур по квартире на ул. Ленина, 15" ...>

И не забывайте про loading="lazy" — это сигнал Core Web Vitals, что страница оптимизирована, и косвенно влияет на ранжирование.