3 заметки с тегом

Работа с материалами на сайте

Позднее Ctrl + ↑

Разместить видео внутри материала

Актуально на 13.03.17

N.B. Разместить видео возможно с любого стороннего ресурса, который поддерживает экспорт HTML-кода вставки, обернутого в тег <iframe> ... </iframe>

На уважающих себя ресурсах из официальной справки можно узнать, как получить код вставки: YouTube, Vimeo, VK (нас интересует раздел «Экспорт видео из ВКонтакте») или Видео@Mail.Ru. По аналогии можно получить код вставки еще из нескольких тысяч видеохостингов.

Подсказка. Видеохостинги при генерировании кода вставки позволяют указать дополнительные настройки проигрывателя, который будет размещен на стороннем сайте (в нашем случае — на сайте „Ъ“). Необходимо прописывать ширину проигрывателя не более 430 пикселей. Рекомендованная высота проигрывателя — 242 пикселя.

N. B. Ограничение ширины проигрывателя в 430 пикселей связано с шириной колонки в выводе сайта „Ъ“ на планшетах и устройствах с малым разрешением экрана. При этом адекватные видеохостинги (например, YouTube и Vimeo) отдают код, способный встраивать резиновый проигрыватель, занимающий всю ширину контейнера (в нашем случае — колонка материала сайта „Ъ“). Неадекватные же  — отдают статичный код, и проигрыватель займет ровно 430 пикселей по ширине, даже если колонка материала будет шире. Это выглядит непривлекательно, но с этим ничего не поделать.

Далее подразумеваем, что код вставки видео успешно получен, например:

<iframe width="430" height="242" src="https://www.youtube.com/embed/flKUulEZyvI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Для размещения видео в материале нам понадобится функционал «обвязок» документов. Выбираем материал кликом по заголовку и нажимаем кнопку «Управление обвязкой документа»:

Отображение документа в нижней части окна перейдет в режим разметки абзацев. Кликаем по номеру абзаца, перед которым нам необходимо разместить видео.

Во всплывающем окне «Добавление врезки» настраиваем форму следующим образом:
— параметру Align (выравнивание) задаем значение center (по центру);
— выбираем тип врезки «Свободный текст»;
— в текстовое поле копируем код вставки (не забываем изменить ширину и высоту проигрывателя, выделено желтым).

В результате форма примет такой вид:

Нажимаем кнопку в виде дискеты, чтобы сохранить врезку.

В „Ъ“ принято указывать авторство использованных материалов. Чтобы упростить задачу, воспользуемся небольшой хитростью. Перейдем в режим редактирования текста:

Мы видим, что Магические Недра Ъ-cms разместили врезку точно перед указанным абзацем и представили нам её в виде тега (номер генерируется автоматически):

При помощи тега <sup> ... </sup> укажем авторство видео. Результат будет выглядеть вот так в редакторе текста:

...сообщила в четверг пресс-служба губернатора региона. 
<CITE 163679>
<sup>Видео: пресс-служба хороших новостей</sup>
Коворкинг (от английского co-working — совместно работающие) — это модель работы...

И вот так на сайте после сохранения изменений:

Примеры вставки видео из различных источников можно увидеть здесь (тестовый сайт).

P. S. Иногда в Internet Explorer предпросмотр видео на тестовом сайте не происходит. Причиной могут быть неверные настройки или вообще отсутствие автономной установки Adobe Flash Player в системе, поэтому перед началом поиска возможных ошибок откройте страницу в Google Chrome.

 
Вернуться к содержанию

2017   Работа с материалами на сайте
Ранее Ctrl + ↓