Картинки и видео

Турбо‑страницы поддерживают:

Картинка без подписи

Чтобы разместить картинку без подписи, используйте элемент img:

<img src="https://clck.ru/FFAuR"/>

src

URL изображения. Поддерживаются форматы JPEG, PNG, GIF, SVG.

При просмотре Турбо‑страницы изображение масштабируется под размер экрана мобильного устройства. Посетитель может увидеть его в исходном размере, нажав на изображение. Если картинка ссылается на другую страницу сайта или сторонний ресурс, то при нажатии откроется установленная ссылка.

Примечание

GIF проигрывается автоматически, если размер изображения меньше 128 пикселей. Если размер изображения больше, содержимое воспроизводится по клику.

Картинка с подписью

Чтобы разместить картинку с подписью, используйте вложенную структуру элементов figure, img и figcaption:

<figure>
    <img src="https://clck.ru/FFAvn"/>
    <figcaption>The caption to the gallery</figcaption>
</figure>

src

URL изображения. Поддерживаются форматы JPEG, PNG, GIF, SVG.

Примечание

Галерея картинок

Чтобы отобразить в статье галерею картинок, используйте элемент div с атрибутом data-block="gallery" и вложенные элементы header и img:

<div data-block="gallery">
    <img src="https://clck.ru/FFAuR"/>
    <img src="https://clck.ru/FFAvn"/>
    <header>The caption to the gallery</header>
</div>

`img`*	Изображение. Содержит атрибут `src`, в качестве значения которого нужно указать адрес картинки.
`header`	Подпись, которая отображается под галереей.

* Обязательный параметр.

Видео в тексте

Видео с вашего сайта

Видео с внешних ресурсов

Чтобы разместить видео с вашего сайта, используйте вложенную структуру элементов figure, video, source, img и figcaption. Поддерживается формат видео MP4.

Внимание

Видео автоматически загружается на Яндекс.Видеохостинг при формировании Турбо‑страницы.

<figure>
    <video width="192" height="108">
            <source
                src="https://clck.ru/Kiunj"
                type="video/mp4"
                data-duration=15
                data-title="Закат"/>
        </video>
        <img src="https://clck.ru/Kiun7"/>
        <figcaption>Таймлапс заката</figcaption>
</figure>

video*

Информация о видео. Возможные атрибуты:

width — ширина видео в пикселях.
height — высота видео в пикселях.

Должен содержать вложенный элемент source с атрибутами:

src — ссылка на видео. Видео должно быть доступно по протоколу HTTPS.
type — тип медиаматериала и его формат. Поддерживается только video/mp4.

img*

Превью. Поддерживаются форматы JPEG, WEBP, PNG, GIF.

figcaption

Подпись к видео.

* Обязательный параметр.

Чтобы разместить видео со сторонних ресурсов, используйте код для встраивания этих ресурсов. Как правило, для этого используется элемент iframe. Также можно размещать видеоматериалы Facebook и Одноклассники.ru.

Чтобы встроить код в содержимое Турбо‑страницы, добавьте элемент iframe:

<iframe src="https://www.youtube.com/embed/KzayrlaQ_Vg"
        width="560"
        height="315"
        frameborder="0"
        allowfullscreen="true"
        referrerpolicy="origin"
        hd="3">
</iframe>

Возможные атрибуты iframe:

`src`*	Cсылка на видео. Видео должно быть доступно по протоколу HTTPS. Список поддерживаемых ресурсов Яндекс.Видеохостинг — `frontend.vh.yandex.ru/embed/` Clipiki.ru — `clipiki.ru/embed/` Dailymotion — `dailymotion.com/embed/video/` Dzenkino — `dzenkino.com/embed/` Facebook — `facebook.com/plugins/post.php/` Ferra.ru — `ferra.media.eagleplatform.com/index/player/` Izlesene.com — `izlesene.com/embedplayer/` Lenta.ru — `lentaru.media.eagleplatform.com/index/player/` Life.ru — `embed.life.ru/video/` Matchtv.ru — `matchtv.ru/vdl/player/` MyVi.ru — `myvi.ru/player/embed/` Passion.ru — `passionru.media.eagleplatform.com/index/player/` Quto.ru — `quto.media.eagleplatform.com/index/player/` Rutube — `rutube.ru/pl/, rutube.ru/play/embed/` Sputnik Moldova — `ru.sputnik.md/services/video/embed/` Vesti.ru — `player.vgtrk.com/iframe/video/` Vimeo — `player.vimeo.com/video/` Wmj.ru — `wmj.media.eagleplatform.com/index/player/` YouTube — `youtube.com/embed/`, `youtube-nocookie.com/embed/` Авторамблер — `autorambler.media.eagleplatform.com/index/player/` Афиша — `afisha.media.eagleplatform.com/index/player/` Афиша-Еда — `eda.media.eagleplatform.com/index/player/` ВКонтекте — `vk.com/video_ext.php/` Газета.Ru — `gazeta.media.eagleplatform.com/index/player/` Живой Журнал — `vc.videos.livejournal.com/index/player/` Известия.Ru — `iz.ru/video/embed/` Летидор — `letidor.media.eagleplatform.com/index/player/` Мой мир@Mail.ru — `my.mail.ru/video/embed/` Мотор — `motor.media.eagleplatform.com/index/player/` Одноклассники — `ok.ru/videoembed/` Пятый канал — `5-tv.ru/player/` Рамблер.Новости — `ramblernews.media.eagleplatform.com/index/player/` РИА Новости — `ria.ru/services/video/embed/` Телеканал «RT» — `russian.rt.com/<...>/video/` Телеканал «Звезда» — `tvzvezda.ru/<...>/player/` Телеканал «НТВ» — `ntv.ru/embed/` Телеканал «РЕН ТВ» — `ren.tv/player/` Чемпионат — `championat.media.eagleplatform.com/index/player/` ЯПлакалъ — `yapfiles.ru/get_player/`
`width`	Ширина. Размер объекта масштабируется с учетом размера экрана мобильного устройства.
`height`	Высота. Размер объекта масштабируется с учетом размера экрана мобильного устройства.
`frameborder`	Рамка объекта.
`allowfullscreen`	Признак полноэкранного режима.
`referrerpolicy`	Позволяет указать реферрер.
`sandbox`	Позволяет установить ряд ограничений на встраиваемый контент.
`hd`	Позволяет задать разрешение видео. Число от 0 до 3 включительно. Используйте для видео ВКонтакте.

* Обязательный параметр.

Написать в службу поддержки

Картинки и видео

Картинка без подписи

Картинка с подписью

Галерея картинок

Видео в тексте

Была ли статья полезна?