Как взять html код с ютуба

Как получить HTML-код видео

Получить HTML код и вставить его на livebmx.ru очень просто! На многих сайтах он обозначается как EMBED код. Разберём несколько самых популярных сайтов и онлайн видеоплееров. В случае, когда Вы нашли интересное видео на каком-либо сайте с онлайн проигрывателем, для начала наведите курсор мышки на окно с видео, нажмите правую кнопку мыши и откроется дополнительное меню. Выбираете пункт «Watch on …». В зависимости от сайта появится «Watch on vimeo»(отмечено красным цветом на рисунке 1) или «Watch on youtube»(отмечено красным на рисунке 4). Эту же команду в большинстве случаев можно вызвать нажатием левой кнопки мыши на логотип в правом нижнем углу (на рисунке 1 и 4 обведён синим цветом ). Откроется сайт хостера.

Рисунок 1

Vimeo.com

Далее в случае Vimeo в правом верхнем углу проигрывателя нажимаете иконку «Embed» (отмечена розовым цветом на рисунке 1). Открывается меню (нижняя часть рисунка 2). Вам необходимо проставить правильный размер видео плеера, для этого в меню нажмите «Customize embed options» (отмечен оранжевым цветом на рисунке 2), открывается дополнительное меню. В первом параметре «Size» в окошке левее (ширина) пишем цифру 480 (отмечено фиолетовым цветом на рисунке 3), второе число ставится само автоматически, новый размер вставляется в код тоже автоматически. Потом убираете все галочки ниже (если они проставлены). Затем наводите курсор мыши на окно с «Get the embed code» (отмечено зелёным цветом на рисунке 3) и копируете (правая кнопка мыши->Копировать) содержимое. Код получен.

Рисунок 2

Рисунок 3

Youtube.com

В случае s Youtube нажимаем кнопку «Встроить» (находится чуть ниже окна с плеером и отмечена розовым цветом на рисунке 5). Открывается меню. Проставляете правильный размер в окне «Пользователский» (отмечено зелёным цветом на рисунке 5). В параметр «Ширина» вписываем 480, второй размер проставляется сам автоматически и обновляется код. Далее немного выше убираете галочки (если проставлены) и наводите курсор мышки на окно с кодом (выделено розовым цветом на рисунке 5), копируете (правая кнопка мыши->Копировать) содержимое. Код получен.

Рисунок 4

Рисунок 5

Rutube.ru

1)Если Вы находитесь на стороннем ресурсе с встроенным проигрывателем Rutube, то наведите курсор мышки на левый верхний угол окна с проигрывателем и появится иконка «Ссылка и код» (отмечена красным цветом на рисунке 6). Нажимаете на неё левой кнопкой мыши и открывается меню с кодом плеера (отмечено синим цветом на рисунке 6). Копируете содержимое окна, код получен. Вставляете на livebmx.ru в соответствующее окно.Для перехода со стороннего сайта на сайт Рутубе – нажмите логотип в правом нижнем углу видеоплеера, как в случае с vimeo или youtube.

2)Если у Вас открыта непосредственно сама страница Rutube.ru c видеоплеером, то нажимаете вкладку «Ссылка и код» (отмечена жёлтым цветом на рисунке 7), которая находится чуть ниже видеоплеера. Открывается меню. Копируете содержимое пункта «Код плеера» (отмечен салатовым цветом на рисунке 7). Код получен, вставляете на livebmx.ru в соответствующее окно.

Рисунок 6

Рисунок 7

Видеоплеер на сайте Vkontakte.ru

1) Вне зависимости от сайта, на котором находится встроенный плеер Вконтакте. Наведите курсор мышки на окно с проигрывателем. Нажмите правую кнопку мыши, откроется вспомогательное меню. Выберите «Копировать код видео» (отмечен красным цветом на рисунке 8), далее вставьте полученный код на livebmx.ru в соответствующее окно. Поменяйте параметр «width» на 480 , код готов.

2) Если Вы находитесь на сайте Вконтакте, нажмите кнопку «Получить код видео» (отмечено синим цветом на рисунке 8), появляется окошко с кодом, копируте и вставляете на livebmx.ru в соответствующее окно. Поменяйте параметр «width» на 480 , код готов.

Рисунок 8

Видеоплеер на сайте Vitalbmx.com

Наводим курсор мышки на кнопку «Menu» в правом нижнем углу. Выбираем пункт «Embed» (отмечен салатовым цветом на рисунке 9), открывается окно с кодом (отмечено жёлтым цветом на рисунке 9) и размером (отмечено розовым на рисунке 9). Проставляем правильную ширину 480 в мини окошко «Width» и нажимаете кнопку «Copy to clipboard» (это означает «Копировать»). Код получен, вставляете в соответствующее окно.

Рисунок 9

Если Вы хотите загрузить видео со своего компьютера, сначала загрузите его на один из 5 первых на этой странице видеохостеров. Поначалу может показаться непривычным, но с опытом все эти действия выполняются не дольше чем, за 10 секунд!

Автор статьи: Андреев Максим

Все права защищены, копирование материала разрешается только с размещением активной ссылки на livebmx.ru.

Как добавить видео на HTML-страницу

Этот туториал покажет, как добавить видео на HTML -страницу.

Видео с YouTube

1. Откройте видео на сайте YouTube, правой кнопкой мышки кликните по видео и в выпадающем списке выберите опцию Получить код для встраивания (Get embed code). Скопируйте этот код.
2. Вставьте скопированный код в желаемое место в . html файле и сохраните изменения.
3. Обновите страницу и просмотрите изменения на сайте.

Видео с Vimeo

1. Откройте видео на сайте Vimeo и кликните по иконке Поделиться (Share). Вы можете изменить дизайн видео, кликнув по ссылке Показать опции (Show options). Скопируйте код с поля Вставить (Embed).
2. Вставьте скопированный код в желаемое место в . html файле и сохраните изменения.
3. Обновите страницу и просмотрите изменения на сайте.

Проигрыватель WEB player

1. Сейчас мы покажем, как добавить видео с помощью проигрывателя WEB player. Нам необходимо добавить код, показанный ниже. Код source src=»https://www.templatemonster.com/help/ru/video1.mp4″ определяет путь к видео файлу, код type=»video/mp4″ определяет тип файла. Более подробную информацию о теге video вы можете получить по этой ссылке.

Вставьте скопированный код в желаемое место в . html файле и сохраните изменения.

Обновите страницу и просмотрите изменения на сайте.

Вы также можете воспользоваться детальным видео туториалом:

Эта запись была размещена в Работа с HTML и помечена как embed, HTML, player, video. Добавьте в закладки постоянную ссылку.

Как взять html код с ютуба

Текущую редакцию Вашего 1С-Битрикс можно просмотреть на странице Обновление платформы ( Marketplace > Обновление платформы ).

Ограничений нет

Очень часто видео размещают на видеохостингах типа Youtube, Rutube и других. «1С-Битрикс: Управление сайтом» предоставляет удобную и простую в настройках возможность для показа такого видео на сайтах.

Видеоурок

В видеоролике показываем примеры размещения видео с помощью вставки html-кода с видеохостингов Youtube и Rutube .

Как встроить видео с видеохостинга

Для вставки видео с помощью html-кода:

• Откройте страницу видеохостинга, например Youtube , с видеороликом;
• Нажмите кнопку Поделиться ;
• Выберите вариант Встроить ;
• Скопируйте полученный код;
• Вставьте его на страницу одним из способов:
  • Первый способ: откройте страницу на редактирование в режиме HTML-кода ;
  • Второй способ: откройте визуальный редактор и переключите его в режим Визуальный редактор может работать в двух режимах. Визуальный режим — более простой и интуитивно понятный вариант. Мы сразу видим, как будут выглядеть элементы на странице. Второй вариант — режим исходного кода.
    
    Подробнее. редактирования исходного кода.

Код вставки видео может выглядеть так:

При необходимости поменяйте размеры окна видео изменив значения высоты (height) и ширины (width) прямо в коде, или открыв свойства видео в визуальном редакторе (в визуальном режиме). Если устанавливаете размеры вручную, не забудьте соблюсти пропорцию сторон, иначе в окне появятся черные полосы по краям.

Примечание: Если при просмотре сайта с мобильной версии видео не масштабируется, то это значит, что шаблон вашего сайта не адаптирован для мобильных устройств.

Желательно это знать:

• HTMLbook — справочник по HTML

Аудио и Видео

На HTML-страницу можно вставить любой файл, содержащий аудио или видеозапись.
Это наиболее популярное, массовое увлечение сейчас: «выкладывать» в интернет клипы, фильмы, музыку, анимацию, фотогалереи и т.д..

Применение подобных технологий делает страницу сайта привлекательнее, «живее». Да и вообще, мультимедиа — большое дело!

Очень скоро эта страница будет полностью изменена, как, впрочем, и следующая страница «Аудио и Видео на HTML» тоже.
Теперь браузеры научились отлично справляться БЕЗ всяких «хитрых кодов» и флэш-плееров.

А пока решил оставить здесь всё, как на ней и было раньше, но всё же, чтоб Вам не было совсем уж скучно, добавил один аудиоплеер с весёленькой карнавальной музыкой. Потанцуем?

В настоящее время очень многие выходят в интернет с помощью различных мобильных устройств: планшетов, смартфонов.
Поэтому, решил к этой странице сделать и добавить ещё одну. На ней показываю самые простые способы работы с мультимедийным контентом.

Если не удаётся запустить аудио с этой, то прослушать музыкальные файлы на любых современных устройствах можно с неё:

На этой же странице — сначала об аудио и видео, а после о галереях, и слайдерах.
Знаю несколько способов вставки музыки и видео на сайт. Покажу два из них.

Аудио

Установил у себя на сайте плеер, подобрал приятную мелодию. Её можно слушать, и управлять плеером со страницы сайта. Элементы управления Вам знакомы.

Кстати, этот же плеер, слегка изменив код, можно представить и вот в таком виде, сокращённом. Я не стал подключать его к музыке, а просто вывел панель на страницу.

Мне больше нравится полный вариант, но . . такая возможность есть.

Видео

Взял интересное(!) видео с «YouTube», и вставил панель его просмотра на страницу своего сайта.
Интересные уроки о создании сайтов на CMS WordPress от человека, профессионально занимающегося разными веб-технологиями.
Кстати! В первом, вводном уроке, он сравнивает две популярные CMS: WordPress и Joomla с точки зрения простоты их использования для начинающих пользователей .

Видео так и называется: «WordPress — уроки для начинающих».

Разумеется, сервис «YouTube» постоянно используется для рекламы чего-либо. И весьма успешно!
Кто смотрел, видели вставленную автором этого видео рекламу себя и своих партнёрских ссылок на ресурс хостера, предоставляющего услуги размещения сайтов в интернете.

И не только для рекламы он успешно используется. Для изучения чего-либо такой сервис просто незаменим!
Можно сохранять в своих плейлистах понравившиеся видео-уроки, а потом выводить их в нужном месте своего сайта.

К примеру, два из сохранённых мною во время обучения видео-урока, которые хотелось бы всегда иметь «под рукой», вывожу здесь: «Локальный сервер» (в новом окне) .

Короче, уметь работать с сервисом «YouTube» нужно обязательно!

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

Вообще-то, вставить любое видео с упомянутого сервиса очень просто. Для этого достаточно скопировать HTML-код , который этот сервис даёт уже готовый, и разместить его в нужное место страницы своего сайта.

Чтобы получить код вставки, кликните по кнопке «поделиться«. Подчеркнул её красным. А сам блок кнопок находится сразу же ниже видео (прямо под ним).

После клика по указанной кнопке, Вам на затемнённом фоне откроется форма выбора нужного кода. Красной стрелкой показал ту, что даст HTML-код для сайта.

К примеру, видео, что вставлено на этой странице, имеет вот такой код вставки:

*Prim. Правда, это уже переделанный мною код (сокращён). Тем не менее, он полностью рабочий.

Можно его прямо отсюда скопировать, и вставить, куда захочется, в любое нужное место HTML-кода любой страницы на своём сайте.
А оригинал полученного кода вставки желающие увидят ниже. смотреть сразу:

Важно! Обратите внимание!

Адрес видео, который сервис даёт, чтоб просто «поделиться» ссылкой, — другой!

Если «по-умолчанию» он — https:// youtu.be /WXwElka9Brk, то для вставки на сайт он выглядит уже иначе — https://www. youtube.com / — домены разные!

Для чего такое делается? Честно говоря, не знаю. Так и не понял. Однако! Если на свой сайт вставить приведённый выше код, заменив в нём youtube.com на youtu.be , что даётся «по-умолчанию», то видео на странице сайта выводиться не будет. Проверял!

В качестве обычной ссылки — youtu.be — работает, а вот youtube.com — нет!

И это несмотря на то, что кликая по ссылке с youtu.be , пользователь всё равно попадает на адрес youtube.com . . . . Зачем так было сделано?! Якобы, для сокращения интернет-адреса. Ну . . «жираф большой, ему видней».

Хорошо хоть идентификатор везде остаётся прежним: WXwElka9Brk .

Конечно, для вставки нужного видео на разные ресурсы гораздо проще пользоваться кодом, который сам появится после клика по соответствующей иконке: «ВКонтакте», «Twitter», «Facebook», и т.д.. Естественно, это проще.

Однако!
Полученные коды вставки я всё же переделываю!

В качестве примера, расскажу о переделке кода видео с данной страницы. Того, что Вы видели выше.

Мне НЕ нужны были все видео-файлы, что выдаёт «YouTube» после просмотра.

Хотелось вставить видео только этого автора и только по этой теме.

Поэтому, я убрал из полученного на сервисе кода большую часть его, дописав вручную запрет показывать другие видео.

Как видите, после идентификатора первого видео-файла и символа «?» я прописал команду «rel=0» , которая указывает браузеру: «дальше показывать не нужно».

Команда «start=0» означает, что видео будет показываться с самого начала. А если бы было нужно воспроизвести с 10-ой минуты, скажем, то поставил бы не «0», а «600», т.к. отсчёт времени ведётся в секундах .

Кстати , с какой(?) секунды начнётся воспроизведение, можно было бы установить сразу, ещё в форме выбора кода, поставив «галочку в чекбокс» на нужном времени.

Можно . . только пришлось бы «ловить момент», а вручную это сделать гораздо проще.

*И тоже кстати! Атрибут «src» у меня указан со значением протокола «https» , а раньше же давали обычный «http» . Работает отлично(!) и так, и эдак.

Короче, много чего поубирал из кода!

А выглядел полученный, т.е. НЕ переделанный код вставки вот так:

&lt/iframe>

Проще говоря, в таком коде предлагалось ВСЁ РАЗРЕШИТЬ. Всю рекламу сервиса, другие совершенно не нужные мне видео, и т.д., и т.п..

Поэтому, в большинстве случаев (если удастся, конечно) обрезаю лишние видео-файлы.
**Почему, собственно, я должен рекламировать со своего сайта всё подряд?!

Думаю, что и Вам не очень нравится, когда после видео, которое хотели, и вставили Вы, «YouTube» начинает предлагать посмотреть какие-то другие, незнакомые.

Надеюсь, данная информация поможет справиться со «своеволием» этого сервиса.

Важно!

Учтите! Популярная CMS WordPress, к примеру, переделывает исправленный и вставленный код вот в такой:

К тому же! Реклама других видео всё равно в нём останется. Пробовал!
Можете сами посмотреть на моём тренировочном тестовом блоге, сделанном на этой CMS. Он здесь: «Сайты на WordPress» (откроется в новом окне) .

Там, на странице «Тренировка» , найдёте ещё много чего интересного о вставке разных кодов в этот движок.

А здесь скажу лишь, что это одна из главных причин, почему мне больше всего нравятся простые сайты, созданные вручную!

Показал два принципиально разных способа вставки аудио и видео на страницы своего HTML-сайта.

В первом случае и сами музыкальные файлы, и плеер находятся у меня на сайте. А вот файлов видео у меня нет. Есть только возможность их просматривать.

Лично я считаю, что гораздо лучше иметь все файлы на своём сайте. Поскольку, если автор видео вдруг уберёт его с «YouTube», то и на Вашем сайте оно исчезнет!

Кто был на этой странице ранее, знает — раньше здесь было вставлено другое видео.

Дальше посмотрите другие примеры работы с мультимедийным контентом.

Галереи

Создание всевозможных фотогалерей на сайте — тоже непременное условие для его популярности. Лучше один раз увидеть, чем 100 раз прочитать.

Желающие посмотреть четыре простые HTML-галереи для сайта в действии, могут это сделать в разделе «Галерея» (откроется в новом окне) . Не стал перегружать эту страницу.

Кого интересует анимация, тем сюда: «Анимация» (аналогично) .

Слайд-шоу

О том, что создание разных слайдеров для сайта не менее популярное занятие, даже и говорить не стоит. Факт!

Кто хочет посмотреть три простых слайд-шоу для сайта в действии, могут это сделать в разделе «Слайд-шоу на HTML» (откроется в новом окне) . Аналогично. Не стал перегружать эту страницу.

Не только посмотреть, но научиться создавать, и подключать 8 видов слайдеров, сможете на странице «Слайд-шоу» (откроется в новом окне) .

Последняя, предложенная к просмотру страница, будет особенно интересна людям, изучающим jQuery.
На ней весь процесс создания и подключения слайд-шоу для сайта подробнейшим образом прокомментировал.
P.S.* К тому же, даю там ссылку, где можно получить совершенно бесплатно полный комплект рабочих, проверенных скриптов, использовавшихся для создания слайд-шоу.

Очень интересен внутренний сайт-визитка «Личная страничка», где применил самый популярный тип слайдера — «вертушка».

Использовал такое слайд-шоу в качестве эффектного элемента дизайна страницы сайта. Кроме этого, увидите там действие других веб-технологий.

Заключение

Здесь, и на смежной странице, показал Вам способы и свои возможности по работе с мультимедийным контентом сайта.
Считаю, что для «Портфолио» показал вполне достаточно.

Все права защищены. Copyright © 2009 — Коротеев Владимир.