Гибкие видео для сайта с Rutube, YouTube, Vimeo
Чтобы вставить гибкие видео на сайт с видеохостингов RuTube, YouTube, Vimeo – мы будем использовать немножко “ковыряние в коде”, это будет не сложнее чем “скопировать-вставить”. На самом деле все очень просто, только немножко внимательности и все получится.
Смотрите этот видеоурок:
Коды для размещения видео в программе Muse:
- просто скопируйте код и вставьте на страницу (замените видео на своё):
<div class="videoWrapper"> <iframe width="720" height="405" src="//rutube.ru/play/embed/10161728" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe> </div>
- просто скопируйте код и добавьте его в свойства страницы, в раздел метаданные – в окошко html для <head>:
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
В общем ничего-то и сложного и не нужно, чтобы разместить ваши гибкие видео на сайт в программе Adobe Muse. Вместо видео с тиграми и квадрокоптером, случайно попавшегося мне на видеохостинге RuTube, вставьте код своего видео с этого же видеохостинга или с любого другого (YouTube, Vimeo).
Что касается видеохостингов YouTube, Vimeo конечно проще использовать стандартные виджеты программы. Видеоурок по размещению видео с YouTube можете также посмотреть по этой ссылке: Как добавить видео с YouTube на сайт.
Гибкие видео. Общий обзор. Описание проблемы.
В этом видеоуроке мы рассмотрим, как вставить гибкие видео с видеохостинга Rutube на сайт в программе Adobe Muse, притом, чтобы оно обладало некой респонсивностью, резиновостью и подстраивался в гибком дизайне под ширину браузера.
Я подготовил уже небольшой проект. И давайте разберем, что у меня здесь есть.
Гибкие видео. Где взять код видео в RuTube? Обычная вставка видео.
Первым делом, я разместил сюда просто ссылку с Rutube – код для блога. Находясь на сайте Rutube, я нажал вот на такой значок и нажал на кнопку «Код для блога». После того, как я нажал на эту кнопку, код для блога скопировался у меня в буфер обмена и я вставил его на сайт в программе Adobe Muse, просто нажав правую кнопку мыши и выбрав здесь «Вставить». Автоматически вставился iframe. Если мы сейчас посмотрим html-код данного объекта, то мы увидим, что здесь вставлен этот iframe – код, который я скопировал с сайта Rutube. И все бы хорошо, но при изменении ширины браузера, его высота никак не подстраивается при изменении ширины браузера.
Гибкие видео. Еще два видео для примера. Просмотр.
Здесь я разместил стандартный виджет «YouTube», добавил сюда свое видео и стандартный виджет «Vimeo». Это два стандартных виджета в программе Adobe Muse. И при изменении ширины браузера, эти два виджета умеют подстраиваться и сохранять пропорции при изменении ширины браузера. Они подстраивают свою высоту и свою ширину. Если же мы просто вставили видео с видеохостинга Rutube с помощью обычной вставки кода, то оно не подстраивается.
Гибкие видео. Как сделать?.
Что же нам нужно делать? Я здесь разместил второй вариант. Нам нужно ссылку с Rutube заключить в теги <div></div>. Если мы посмотрим сейчас на html-код данного блога, то мы увидим, что та же самая ссылка, которую я скопировал с Rutube заключена в теги <div></div>. Вот начинается тег и вот заканчивается тег.
Все, что нам нужно сделать дальше, так это вставить небольшой код в свойства страницы, поскольку даже сейчас заключив ссылку в теги, мы ничего не получим. Нам необходимо прописать характеристики (стили) к данному блоку в свойствах страницы сайта.
Мы заходим в «Страница», выбираем «Свойства страницы» и здесь идет в раздел «Метаданные», и выбираем поле «HTML для <head>». Сюда мы должны вставить определенный код, код для вставки у меня сохранен в отдельном файле. Выглядит он вот так (см. код выше)
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
Мы копируем данный код либо пишем его и вставляем в «HTML для <head>». Нажимаем «ОК». И теперь мы получили для данного видео, вставленного с Rutube, точно такую же возможность, как и в стандартных виджетах для вставки видео с YouTube или с Vimeo. Т. е. видео будет подстраивать свою высоту и ширину при изменении ширины браузера. Но мы должны делать это при просмотре в браузере.
Гибкие видео. Смотрим что получилось.
Нажмем сочетание клавиш ctrl+shift+E для просмотра в браузере. Страница загрузилась. Мы здесь видим 4 наших видео, которые я разместил на данной странице. И теперь мы видим, что первое видео, вставленное обычной вставкой ссылки. Второе видео у нас заключено в теги <div></div>. Давайте посмотрим, как эти два блока будут реагировать на изменения ширины браузера. Я изменяю ширину браузера. Вы видите теперь, что при изменении ширины браузера второе видео подстраивает свою высоту и ширину, а первое видео остается таким же, каким и было, т. е. оно не адаптируется под ширину браузера. Второе же видео хорошо адаптировалось. Точно также, как и стандартные виджеты «YouTube» и «Vimeo» подстраиваются под ширину браузера.
Вот таким образом вы можете сделать так, чтобы вставленное с видеохостинга Rutube видео, подстраивалось также под ширину окна браузера. Все, что мы сделали – это мы заключили ссылку с видеохостинга Rutube, код для блога в теги <div></div> и добавили код в свойства страницы сайта. Прописали здесь стили для данного блока. Кликайте по ссылкам под этим видео, чтобы попасть на страницу, где вы сможете скопировать данные коды для вставки. И вставляйте видео с видеохостинга Rutube на сайты в программе Adobe Muse.
Хотел бы еще отметить, что точно таким же образом вы можете вставлять и видео с видеохостингов YouTube и Vimeo.
Гибкие видео. Где взять код видео в YouTube?
Например, если у вас уже вставлено видео с видеохостинга Rutube, и вы захотели поменять видео и разместить не с Rutube, а с YouTube. Вы заходите на сайт, например, на мой видеоканал Adobe Muse Уроки. Нажимаете правой кнопкой на видео и нажимаете «Копировать html-код».
Далее идете снова в программу Adobe Muse, нажимаете здесь на видео, которое вы уже отредактировали – это видео, заключенное в теги <div></div>, нажимаете здесь правой кнопкой мыши и редактируете html. И вместо этого кода вставляете код с сервиса YouTube, например. Нажимаем «Вставить», нажимаем «ОК», проходит некоторое время. И ссылка вставилась. Давайте просмотрим страницу в браузере. Нажимаем ctrl+shift+E. И теперь у нас вместо второго видео, там, где было видео с Rutube, размещено мое видео с видеохостинга YouTube. Если мы начнем сейчас размер ширины браузера, размер этого видео точно также будет масштабироваться, как и предыдущие видео, размещенные здесь.
Гибкие видео. Где взять код видео в Vimeo?
Чтобы взять ссылку с видеохостинга Vimeo, вам необходимо зайти на хостинг Vimeo, выбрать то видео, которое вы хотите вставить. Перейти чуть ниже и нажать «Поделиться». Появится вот такое окошко и здесь есть тот же самый код iframe. Его вы копируете. Можете не копировать дальше, а скопировать только то, что между тегами <iframe></iframe>. Нажимаете «Копировать» и идете в программу Adobe Muse. И там, где у нас было вставлено видео с канала YouTube, нажимаете «Редактировать HTML» и вставляем сюда между тегами <div></div> ссылку с хостинга Vimeo. Нажимаете «ОК».
Опять происходит просчет и сейчас здесь будет размещено уже видео с видеохостинга Vimeo. Если мы сейчас зайдем в режим «Просмотр», то вы увидите, что здесь на втором видео разместилось видео с видеохостинга Vimeo. Если мы сейчас уменьшаем ширину браузера, то у нас точно также видео масштабируется.
На этом я заканчиваю данный урок. Пробуйте, делайте. Если вам было полезно это видео, ставьте лайк, пишите комментарий внизу. И до встречи в следующих видеоуроках на моем канале!
Успехов Вам.
Автор видеоуроков и курсов
Дмитрий Шаповалов.
Здравствуйте!
Почему в коде страницы отображается 2 счетчика метрики? Я код счетчика добавляю в метаданные, после кода стили
Спасибо за урок! Подскажите, чтобы вставить гибкое видео из ВК эти коды тоже подойдут?
Да, подойдут. Нужно скопировать код видео iframe из ВК (под видео нажать “Еще”-“Экспортировать”) и вставить этот код между тегами div. Однако следует иметь ввиду, что “Отображение видео из ВКонтакте не разрешено на сайтах без доменного имени, при использовании ip адреса в качестве адреса сайта”. То есть результат Вы увидите только после размещения сайта на хостинге, до этого будет синяя заглушка с предупреждением. Как вариант для просмотра можно использовать публикацию на businesscatalyst.
Спасибо за урок, Дима! А может Вы подскажете где можно посмотреть библиотеки для Muse?
Библиотек для Adobe Muse как таковых я не находил. Зато существует множество отдельных платных и бесплатных виджетов и шаблонов, из которых вполне можно собрать приличную библиотеку для своей работы, подобрав наиболее востребованные в своей работе элементы. Также сегодня в одной из рассылок я получил набор 54 примера крутых лэндингов – советую посмотреть.