Встраивание карт и видео на страницы темы

Почему 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;"

В результате код видео будет выглядеть примерно так:

Сергеев Владимир
Разработчик
Последнее обновление: 11 января 2020
Эта статья была полезна?ДаНет

4 комментария

  • Вставляем карту через html . По инструкции

    На сайте карта не растянулась...


    Перехожу в визуальный редактор , карта растянута .

    Где копать дальше ? 

    мой пример :

    <iframe src="https://yandex.ru/map-widget/v1/?um=constructor% #номер карты#" alloufullscreen="true"style="border:0;width:100%;height:450px;"></iframe>

    • Сергеев Владимир
      Разработчик
      10 января 2020 22:45

      Ссылка? 

    • Сергеев Владимир
      Разработчик
      11 января 2020 12:34

      У вас путаница с тегами.
      Iframe вставлен внутри тега <a> с классами uk-button uk-button-text.

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

      Во-вторых, тег <a> строчный (inline), т.е. это текстовый элемент и он не имеет свойств блочного элемента и не растягивается на всю ширину страницы. 

      Поэтому с точки зрения браузера всё логично: iframe тянется на всю ширину блока, его содержащего.
      Просто содержащий блок не тянется на всю ширину.

      Решение: вынесите iframe из тега <a>. А тег <a> добавьте выше или ниже карты.


      Добавить комментарий
      Чтобы добавить комментарий, зарегистрируйтесь или войдите
      Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
      Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
      Подписывайтесь и получайте скидки!

      Узнавайте первым о скидках и специальных предложениях!