: Вложение расширенных элементов
**HTML-элемент **вставляет расширенный контент в выбранное место документа. Этот контент может быть представлен от внешнего приложения или другого источника интерактивного контента, такого как плагин для браузера, например.
Интерактивный пример
Примечание: Этот раздел посвящён только элементу, который является частью стандарта HTML5, и никак не касается ранних, нестандартизированных его реализаций.
Имейте ввиду, что большинство современных браузеров посчитали устаревшей и удалили поддержку встраивания плагинов, так что использование , как правило, не рекомендуется, если вы хотите, чтобы ваш сайт одинаково работал у всех его пользователей.
| Категории контента | Flow content (en-US) , phrasing content (en-US) , embedded content, interactive content, palpable content. |
|---|---|
| Допустимое содержимое | Отсутствует, это empty element. |
| Пропуск тегов | Должен иметь открывающий тег, закрывающий тег должен быть пропущен |
| Допустимые родители | Любой элемент, который допускает встроенный контент |
| Допустимые ARIA-роли | application (en-US) , document (en-US) , img (en-US) , presentation (en-US) |
| DOM-интерфейс | HTMLEmbedElement (en-US) |
Атрибуты
Атрибуты этого элемента включают все глобальные атрибуты.
Отображает высоту ресурса в CSS пикселях. Это должно быть абсолютное значение; проценты не допустимы.
Ссылка на встраиваемый ресурс.
MIME-тип, используемый для выбора подключаемого модуля для создания экземпляра.
Отображает ширину ресурса в CSS пикселях. Это должно быть абсолютное значение; проценты не допустимы.
Примечание
Вы можете использовать свойство object-position , чтобы настроить расположение встроенного объекта в рамке элемента, а также свойство object-fit , чтобы контролировать регулирование размер объекта в соответствии с рамкой.
Примеры
embed type="video/quicktime" src="movie.mov" width="640" height="480" />
Спецификации
| Specification |
|---|
| HTML Standard # the-embed-element |
Совместимость с браузерами
BCD tables only load in the browser
Примечание: До версии 45, Firefox не отображает содержимое HTML-ресурса, но сообщает о том, что для отображения контента требуется плагин (см. Firefox bug 730768).
Смотрите также
- Другие элементы, используемые для встраивания различного рода контента: , , (en-US), , , (en-US), , and .
- Свойства, для позиционирования и определения размера внедрённого контента в его фрейме: object-position and object-fit
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
Как встроить мультимедийный контент в страницу сайта. 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-элементы также на экранах мобильных устройств.
Самый простой вариант
Для наиболее популярных площадок многие сервисы в поле «Поделиться» предлагают отдельные кнопки. По клику по ним (если вы авторизованы в браузере на этих площадках) вы напрямую встроите нужный контент в их страницы без необходимости в дополнительных операциях. И даже, может быть, сможете настроить и внешний вид встраиваемого контента.
Embed код что это
Элемент используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
Спецификация HTML 4.0 рекомендует использовать тег для загрузки внешних данных вместо тега . Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить внутрь контейнера .
Вид внедренного объекта зависит от установленных в браузере плагинов, типа загружаемого файла, а также от атрибутов тега . На рис. 1 и рис. 2 показан вид воспроизведения в браузере различных типов файлов.
Рис. 1. Воспроизведение видеофайла в браузере
Рис. 2. Воспроизведение аудиофайла в браузере
Синтаксис
Атрибуты
align Определяет как объект будет выравниваться на странице и способ его обтекания текстом. height Высота объекта. hidden Указывает, скрыть объект на странице или нет. hspace Горизонтальный отступ от объекта до окружающего контента. pluginspage Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру. src Путь к файлу. type MIME-тип объекта. vspace Вертикальный отступ от объекта до окружающего контента. width Ширина объекта.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег EMBED Embed код что это
Элемент (от англ. embed — вставить, внедрить) используется для загрузки и отображения различных объектов, вроде изображений, видео, аудио и др. Сам , хотя и входит в спецификацию HTML, устарел, поскольку с его ролью лучше справляются специальные элементы, перечисленные в табл. 1.
| Объект | Элемент HTML |
|---|---|
| Изображение | |
| Видео | |
| Аудио | |
| Веб-страница |
часто применялся для вставки на веб-страницу роликов и интерактивных элементов, созданных с помощью Adobe Flash.
Синтаксис
Атрибуты
height Высота объекта. hidden Указывает, скрыть объект на странице или нет. src Путь к файлу. type MIME-тип объекта. width Ширина объекта.
Устаревшие атрибуты
align Определяет, как объект будет выравниваться на странице и способ его обтекания текстом. hspace Горизонтальный отступ от объекта до окружающего контента. pluginspage Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру. vspace Вертикальный отступ от объекта до окружающего контента. Устаревшие атрибуты
Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML, но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться последними версиями браузеров.
Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.
Пример
В данном примере на веб-страницу вставляется PDF-документ заданного размера.
Спецификация
| Спецификация | Статус |
|---|---|
| HTML Living Standard | Живой стандарт |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 4 | 12 | 1 | 12.1 | 4 | 1 |
| 4.4 | 4 | 12.1 | 3.2 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.