Как встроить мультимедийный контент в страницу сайта. Embed и Iframe

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

Современные мультимедийные СМИ все активнее пользуются возможностями, которые предоставляют интернет-сервисы для работы с контентом. Ведь далеко не всегда проще и быстрее  создавать материалы в популярных и эффектных форматах только на основе «движка» вашего сайта.

Поэтому порой страницы информационных ресурсов оказываются собраны из множества встроенных в них элементов веб-сервисов. Возможным существование такого «конструктора» делают функции embed и iframe, которые можно назвать основой современного мультимедийного сторителлинга.

Что такое Embed

Это способ заимствовать и задействововать возможности другого веб-ресурса на вашей странице. Благодаря embed, вы встраиваете в свой сайт нужный контент и итоге получаете совершенно полнофункциональный элемент, с которым можно взаимодействовать ровно так же, как и на сайте, откуда он был взят.

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

Благодаря embed, вы можете разместить у себя на странице:

• видео с видеохостингов: наиболее очевидный плюс такого подхода — отсутствие необходимости хранить объемные файлы на своем сервере. Кроме того, сама площадка видеосервиса становится дополнительным каналом распространения вашего контента;
• интерактивные карты, аннотированные иллюстрации: крайне редкие CMS и самостоятельные «движки» сайтов позволяют создавать сегодня их без обращения к сторонним сервисам;
• тесты и инфографику: всё, что касается взаимодействия с пользователем;
• и многое другое.

Что такое Iframe

Если не вдаваться в технические подробности, для пользователя разницы между Iframe и embed нет. Она исключительно формальная: при помощи Iframe размещается html-конент (например, содержание другой веб-страницы), а embed встраивает внешнее веб-приложение. Поэтому в зависимости от особенностей контента для размещения веб-сервис может предложить вам код либо Iframe, либо embed. Слово embed стало нарицательным для любого встраиваемого контента — неважно, идет ли речь об embed, iframe, либо о других способах.

Как вставить Embed или Iframe в веб-страницу?

Подавляющее большинство систем управления контентом или «движков» сайтов имеют два режима редактора создания постов (страниц) — визуальный и html (иногда называемый «источником» или Source). Первый из них, как вы знаете, предназначен для работы с текстом, код же для вставки нужно размещать, переключившись на второй. Для этого достаточно его просто скопировать из соответствующего поля веб-сервиса и вставить в нужное место страницы.

Многие ресурсы также предлагают дополнительные настройки внешнего вида встраиваемого контента — как правило, в них можно задать его размеры и оформление. Впрочем, иногда это можно сделать и просто поменяв соответствующие цифры в строчке кода — например, в полях width и height.

Некоторые современные блоговые площадки вроде Medium уже не имеют html режима создания и редактирования материалов. В этом случае иногда для преобразования контента во встроенный достаточно просто нажать на кнопку с символом кода и вставить в появившееся поле прямую ссылку из адресной строки браузера.

Свои особенности использования embed-контента есть и у самого популярного блогового движка WordPress: на нем работают далеко не все коды. Поэтому целый ряд сервисов для WordPress предлагает их специально оптимизированные варианты. Если же их нет, а типовой код не работает, скорее всего, можно найти специальный плагин, который сделан специально для этой цели сторонними разработчиками.

Наконец, есть сервисы — например, wiki-модули некоторых CMS, которые не предусматривают использование embed в принципе. Понять это можно по отсутствию переключения на html и соответствующих кнопок в панели визуального редактора.

Embed и копирайт

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

Представим себе, что вы хотите проиллюстрировать свою публикацию о событии фотографиями о нем, которые есть в Twitter, Instagram* или в других социальных сетях. Если вы просто скопируете их и загрузите на страницу своего сайта, тем самым вы возьмёте авторский контент без разрешения.

Если же вы вместо этого воспользуетесь embed-кодом, то это будет просто технической возможностью площадки, которая предусмотрена ею изначально. Кроме того, встроенный в страницу элемент будет обладать всеми ее функциями. Например, через ссылки в сообщении Twitter можно подписаться на автора, сделать ретвит и так далее. То же относится и к другим популярным сервисам.

Таким образом, знание о том, что такое embed, очень важно для любого журналиста или блогера, потому как существенно расширяет его возможности.

Недостатки Embed

При использовании заимствованных объектов на страницах своих сайтов стоит помнить о некоторых связанных с этим ограничениях и неудобствах.

Во-первых, встроенный контент как правило увеличивает время открытия веб-страницы, так как подгружается с внешних ресурсов. Особенно это важно, когда мы имеем дело с «тяжелыми» мультимедийными форматами. Скорость загрузки, в свою очередь, является очень важным показателем для сайта. Если страница открывается очень долго, вы можете просто потерять немалый процент аудитории. Не любят это и поисковые машины, которые в ответ понижают ресурс за неоптимизированное содержимое в результатах поиска.

Во-вторых, embed с некоторых сайтов может быть недоступен для пользователя по причине недоступности для него самого сервиса, где вы разместили информацию. Причин того может быть множество — например, настройки доступа к сайтам, сделанные сетевым администратором корпоративной сети учреждения.

В-третьих, встроенный контент может быть заблокирован и на уровне пользовательского устройства — например, на отображении некоторых элементов сказывается использование в браузере плагинов Ad Block или выключенные Flash Player или Java Script. Не всегда гармонично смотрятся некоторые embed-элементы также на экранах мобильных устройств.

Самый простой вариант

Для наиболее популярных площадок многие сервисы в поле «Поделиться» предлагают отдельные кнопки. По клику по ним (если вы авторизованы в браузере на этих площадках) вы напрямую встроите нужный контент в их страницы без необходимости в дополнительных операциях. И даже, может быть, сможете настроить и внешний вид встраиваемого контента.