Почему iframe
На официальном сайте поддержки Вебасист есть краткая инструкция о том, как вставлять карты на сайт.
В своих темах дизайна я настоятельно рекомендую добавлять карты через iframe.
Данный способ размещения позволяет подгружать карты, во-первых, без ущерба скорости загрузки сайта.
Во-вторых, данный способ не "режет" карту при загрузке по Ajax (без перезагрузки страницы).
Добавляем карту Google на страницу
Добавить карту очень просто! Идите на сайт Google Maps.
Введите адрес организации и нажмите на кнопку "поделиться".
Выберите вкладку Встраивание карт и скопируйте получившийся код.
Далее откройте страницу, на которой собираетесь разместить карту.
Переведите редактор в режим HTML. Вставьте скопированный код карты на страницу.
Затем в коде нужно удалить часть лишних фрагментов.
А именно атрибуты width, height, и frameborder.
Чтобы карта растянулась во всю ширину экрана, нужно в атрибут style добавить свойство width:100%;
Для задания высоты, в тот же атрибут style нужно добавить свойство height:450px;
Где 450px – это высота блока. Вы можете задать любое значение, которое вам нужно.
Итоговый фрагмент атрибута style будет выглядеть так:
style="border:0;width:100%;height:450px;"
В результате код карты будет выглядеть примерно так:
Добавляем Yandex карту
Чтобы добавить Яндекс карту на сайт, перейдите на сайт Яндекс Карт.
Введите нужный адрес. Затем нажмите на поделиться.
В появившемся диалоговом окне выберите и скопируйте код в поле Код для вставки на сайт
Далее откройте страницу, на которой собираетесь разместить карту. Переведите редактор в режим HTML. Вставьте скопированный код карты на страницу.
Затем в коде нужно удалить часть лишних фрагментов.
А именно атрибуты width, height, и frameborder.
И добавить атрибут style.
Чтобы карта растянулась во всю ширину экрана, нужно в атрибут style добавить свойство width:100%;
Для задания высоты, в тот же атрибут style нужно добавить свойство height:450px;
Где 450px – это высота блока. Вы можете задать любое значение, которое вам нужно.
Итоговый фрагмент атрибута style будет выглядеть так:
style="border:0;width:100%;height:450px;"
В результате код карты будет выглядеть примерно так:
Вставляем видео с YouTube
Здесь всё то же самое.
Откройте видео, которое хотите встроить.
Нажмите на поделиться под окном видео.
Затем в диалоговом окне выберите пункт Встроить.
В появившемся окне скопирйте код iframe.
Далее откройте страницу, на которой собираетесь разместить видел. Переведите редактор в режим HTML. Вставьте скопированный код видео на страницу.
Затем в коде нужно удалить часть лишних фрагментов.
А именно атрибуты width, height, и frameborder.
И добавить атрибут style.
Чтобы видео растянулась во всю ширину экрана, нужно в атрибут style добавить свойство width:100%;
Для задания высоты, в тот же атрибут style нужно добавить свойство height:450px;
Где 450px – это высота блока. Вы можете задать любое значение, которое вам нужно.
Итоговый фрагмент атрибута style будет выглядеть так:
style="border:0;width:100%;height:450px;"
В результате код видео будет выглядеть примерно так:
4 комментария
Вставляем карту через html . По инструкции
На сайте карта не растянулась...
Перехожу в визуальный редактор , карта растянута .
Где копать дальше ?
мой пример :
Ссылка?
https://steklo2-0.ru/site/cont...
У вас путаница с тегами.
Iframe вставлен внутри тега <a> с классами uk-button uk-button-text.
Во-первых, на мой взгляд, не стоит вставлять iframe внутрь ссылки, иначе с ним нельзя будет взаимодействовать. В валидаторе не проверял, но возможно, он на это тоже будет ругаться.
Во-вторых, тег <a> строчный (inline), т.е. это текстовый элемент и он не имеет свойств блочного элемента и не растягивается на всю ширину страницы.
Поэтому с точки зрения браузера всё логично: iframe тянется на всю ширину блока, его содержащего.
Просто содержащий блок не тянется на всю ширину.
Решение: вынесите iframe из тега <a>. А тег <a> добавьте выше или ниже карты.