Результат работы Конструктора Яндекс Карт - Вставка Yotube ролика в тело балунаЭтот урок проще. Часто меня спрашивают, как вставить произвольный html код в тело балуна, или конкретнее: как вставить в него iframe. Дело еще в том, что стандартный конструктор Яндекса не позволяет из соображений безопасности вставлять в балун iframe. В моем конструкторе таких ограничений нет.  

Вот, что мы получим в результате http://maps.xdan.ru/#hash=mYzyMnRk

Все, что нам потребуется это исходный код для вставки нашего ролика. Его можно взять на Youtube.com. Под любым роликом на этом видеохостинге, есть кнопка Поделиться. А под ней 4 вкладки, нам нужна HTML-код. Тут можно задать размеры видео, и скопировать код.

Есть еще ряд недокументированных опций, таких как автозапуск или просмотр с определенной секунды, о них я расскажу ниже.

Исходный код вставки ролика из youtube - Конструктор Яндекс Карт

настройки параметров кода для вставки

Код есть, теперь его нужно вставить в тело балуна нужного объекта. Это может быть любой объект из вкладки Объекты. Для примера возьмем Метку.

Так часто поступают при размещение рекламы в интернете при раскрутке своего магазина. К примеру есть метка, находящаяся по некому адресу, которая соответствует одному реальному магазину, кликаем по ней и смотрим в ролике, что находится в этом магазине. 

В ее настройках, в левой панели есть поле Балун. Это обычный wysiwyg редактор текста, но он позволяет редактировать html напрямую. Для этого необходимо нажать на кнопку Посмотреть исходный код

Просмотр исходного кода балуна - Конструктор Яндекс Карт

Теперь в него вставляем взятый с Youtube код. Я немного его изменил, задав свои размеры и добавив отступы.

<iframe style="margin:10px" width="100" height="100" src="http://www.youtube.com/embed/RnapFyqfBXM?rel=0" frameborder="0" allowfullscreen=""></iframe>

 Чтобы изменения вступили в силу, необходимо еще раз нажать на кнопку исходного кода. Если все в порядке, то прямо в редакторе Вы увидите Ваш ролик. Для того, чтобы видео сразу начало проигрываться, добавим атрибут  autoplay=1, а чтобы видео воспроизводилось с N секунд добавим start=N.

<iframe style="margin:10px" width="100" height="100" src="http://www.youtube.com/embed/RnapFyqfBXM?rel=0&autoplay=1&start=18" frameborder="0" allowfullscreen=""></iframe>

Посмотрите результат, нажав на метк. Все готово. Результат можно увидеть тут http://maps.xdan.ru/#hash=mYzyMnRk

Таким образом в тело балуна можно вставлять любой произвольный html код.

Рассказать друзьям
author.jpg

Платная консультация по вопросам 1500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Добавить комментарий


Комментарии   

skribbl-io
0 # skribbl-io 27.05.2020 13:16
Have you ever considered about adding a little bit more than just your
articles? I mean, what you say is valuable and all.
But think about if you added some great visuals or videos to give your posts more,
"pop"! Your content is excellent but with images
and clips, this site could certainly be one of
the best in its niche. Fantastic blog!
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору