Адаптивный iframe (YouTube, Google Карты и другие)
Iframe, скопированный с YouTube или Google Карт, приходит с фиксированной шириной и вылезает за экран телефона. Вставьте его сюда и скопируйте адаптивную версию.
Как пользоватьсяВидео и карта, которые помещаются на телефоне
Доступно на: 
Адаптивный iframe (YouTube, Google Карты и другие): для чего нужен
Код встраивания YouTube и Google Карт приходит с фиксированной шириной и высотой и вылезает за экран телефона. Вставьте iframe или просто адрес и получите версию, которая занимает 100% ширины и сохраняет пропорции через aspect-ratio.
Инструмент распознаёт YouTube (включая Shorts в 9:16), Google Карты, Vimeo, Spotify, Instagram, Canva и Google Формы, предлагает подходящую пропорцию или высоту, добавляет loading=lazy, title для программ чтения с экрана и полноэкранный режим и показывает предпросмотр, который можно сузить, чтобы увидеть, как это будет на телефоне.
Как пользоваться
- Вставьте iframe или адрес.
- Проверьте пропорцию и title.
- Скопируйте код на сайт.
Когда использовать
- Видео YouTube на главной странице.
- Карта Google на странице контактов.
- Плеер Spotify или встроенная форма.
Частые вопросы
Почему iframe вылезает за экран на телефоне?
Код встраивания приходит с фиксированными width и height, например 560 на 315. На телефоне шириной 360 px видео оказывается больше экрана. Код, созданный здесь, использует ширину 100% и свойство aspect-ratio, которое сохраняет пропорции на любом экране.
Что делает loading=lazy?
Браузер загружает iframe только тогда, когда он вот-вот появится на экране. Поскольку видео и карты весят много, страница загружается заметно быстрее, если они расположены ниже.
Для чего нужен title у iframe?
Программы чтения с экрана озвучивают title, чтобы сообщить, что находится внутри iframe, например «Видео: как добраться до магазина». Без него человек слышит только «фрейм» и не знает, о чём речь.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.