Как вставить гибкие видео на сайт сRuTube, YouTube, Vimeo

Гибкие видео для сайта с RuTube, YouTube, Vimeo

Гибкие видео для сайта с Rutube, YouTube, Vimeo

Чтобы вставить гибкие видео на сайт с видеохостингов RuTube, YouTube, Vimeo — мы будем использовать немножко «ковыряние в коде», это будет не сложнее чем «скопировать-вставить». На самом деле все очень просто, только немножко внимательности и все получится.

Смотрите этот видеоурок:

Коды для размещения видео в программе Muse:

  • просто скопируйте код и вставьте на страницу (замените видео на своё):

  • просто скопируйте код и добавьте его в свойства страницы, в раздел метаданные — в окошко html для <head>:

В общем ничего-то и сложного и не нужно, чтобы разместить ваши гибкие видео на сайт в программе 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>». Сюда мы должны вставить определенный код, код для вставки у меня сохранен в отдельном файле.  Выглядит он вот так (см. код выше)

Мы копируем данный код либо пишем его и вставляем в «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. Если мы сейчас уменьшаем ширину браузера, то у нас точно также видео масштабируется.

На этом я заканчиваю  данный урок. Пробуйте, делайте. Если вам было полезно это видео, ставьте лайк, пишите комментарий внизу. И до встречи в следующих видеоуроках на моем канале!

Успехов Вам.

Автор видеоуроков и курсов
Дмитрий Шаповалов.

 

4 комментария к “Гибкие видео для сайта с RuTube, YouTube, Vimeo

  1. Спасибо за урок! Подскажите, чтобы вставить гибкое видео из ВК эти коды тоже подойдут?

    • Да, подойдут. Нужно скопировать код видео iframe из ВК (под видео нажать «Еще»-«Экспортировать») и вставить этот код между тегами div. Однако следует иметь ввиду, что «Отображение видео из ВКонтакте не разрешено на сайтах без доменного имени, при использовании ip адреса в качестве адреса сайта». То есть результат Вы увидите только после размещения сайта на хостинге, до этого будет синяя заглушка с предупреждением. Как вариант для просмотра можно использовать публикацию на businesscatalyst.

  2. Спасибо за урок, Дима! А может Вы подскажете где можно посмотреть библиотеки для Muse?

Оставить комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: