как найти html код видео на ютубе
На краю земли
Личный блог Лапаевой Людмилы
Как получить HTML код видео
Чтобы вставить видео на сайт, сначала надо получить его HTML код
Самый простой вариант кликаем по нему правой кнопкой мышки и в открывшемся окне находим строчку скопировать HTML код и вставляем код себе на сайт, но иногда это не срабатывает, есть другие варианты:
Рассмотрим три варианта открытых источников
1.Вариант, когда при наведении мышки на экран в правом верхнем углу высвечиваются три квадратика, нас в данном случае интересует средний
нажимаем на него и получаем картинку ниже, где нажимаем «COPY» и HTML код видео копируется в буфер обмена
Нажимаем на экране перейти на You Tube
Переходим на сайт You Tube и видим под роликом слово «поделиться»
Нажимаем на него и появляется новая строчка, находим слово «HTML-код», нажимаем на него
Появляется сам код
Копируем его и вставляем на сайт
Если мы хотим, чтобы показывалось только наше видео и после просмотра не предлагались другие видео, надо нажать на слово «ещё» под кодом
откроется предварительный просмотр, ниже ролика будет табличка
убрать галочку в графе «Показать похожие видео после завершения просмотра».
Нажимаем на видео кнопочку @mail.ru и переходим на сайт
В новом окне ниже видео есть разные варианты, нас интересует «Опубликовать»
Самый простой способ получения кода видео YouTube 🕔 1 мин.
Небольшое, но очень важное дополнение к посту «Как вставить в пост на Лиру видео YouTube. Обновление«. Хотел опубликовать всё вместе в другом блоге, но так люблю лирушку, что хочется скорее сообщить о новинке. Копирование запрещено! Убедительная просьба: не пишите в комментариях благодарности.
Самый простой способ получения кода видео YouTube
Скопировать HTML-код видеоролика для вставки его в блог или на сайт можно очень простым способом. При этом не нужно заходить на страницу YouTube.
Увидели видеоплеер YouTube, нажимаем правой кнопкой мышки на нижнюю часть плеера. На картинке я ее выделил зеленой рамочкой.
В появившемся списке меню выбираем пункт «Копировать HTML-код» и нажимаем на него левой кнопкой мышки.
Код видео копируется в буфер обмена. Теперь его можно вставить в пост или куда там еще нужно. Как и где на ЛиРу можно разместить видео YouTube подробно описано в посте, ссылка на который есть в начале этой записи.
Как уже написал, способ удобен тем, что не нужно заходить на страницу YouTube для его получения. Минус вижу в том, что плеер не настраивается, а копируются настройки по умолчанию (размеры и так далее).
Посмотрите видео «Смешарики и Гарри Поттер (трейлер-пародия)», которое использовал для иллюстраций.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Добавляем YouTube видео на сайт
Вы решили добавить видео с YouTube на свой сайт? Это хорошая идея, ведь оно поможет обогатить ваш контент и даст посетителям больше информации. Добавление YouTube видео в разделы сайта «О нас» и «О продукте» значительно облегчает изучение информации о вашей компании и деятельности. Давайте разберем как это правильно сделать.
Почему не HTML тег video?
Знание того, как встроить видео YouTube в HTML страницу, избавит вас от многих проблем. Мы будем использовать iframe вместо тега video :
Как вставить видео YouTube на сайт
Для того, чтобы добавить видео с YouTube на сайт, откройте страницу и найдите кнопку Поделиться под видеоплеером:
YouTube сгенерирует код для вставки автоматически. Тег iframe будет иметь URL исходного видео, высоту и ширину плеера и еще несколько атрибутов:
В нашем случае код будет выглядеть следующим образом:
Настройка YouTube видео в HTML5
Параметр autoplay позволяет начать автоматическое воспроизведение YouTube видео при загрузке страницы. Добавьте autoplay=0 в конец URL чтобы включить автовоспроизведение или autoplay=0 чтобы выключить.
Параметр loop позволяет зациклить видео, цикл будет длиться, пока пользователь останавливает его вручную. Использование loop=1 запустит видео снова после того, как она закончится, а loop=0 остановит видео после первого воспроизведения.
Параметр playlist установит плейлист на вашем сайте, несколько YouTube видео будут воспроизведены один за другим в последовательном порядке. Это позволит создать личный список воспроизведения на вашем сайте.
Посмотрите еще несколько параметров, которые вы можете использовать в таблице ниже:
Скрытые возможности встраивания видео из Youtube
При создании сайтов частенько возникает необходимость вставить какой-то видео-ролик из YouTube. Это может быть продающее видео, какая-то инструкция, видео-комментарий.
В этой статье я покажу вам, как это сделать. А также поделюсь некоторыми дополнительными полезностями для вставки этих видео:) Поехали!
Чтобы вставить видео на сайт, необходимо сначала скопировать его код. Код видео берем с сайта YouTube, открыв страницу с нужным видео. На примере видео Академии Лидогенерации:
Комментарии:
Дополнительные настройки встраивания.
Кликните ЕЩЕ под HTML-кодом видео и вы их увидите:
Как они работают:
Если тыкать эти галки, вы увидите изменения в коде для вставки. Пример:
ET1ECoJqdGg» frameborder=»0″ allowfullscreen> — оригинальный код без доп.настроек.
ET1ECoJqdGg? rel=0 » frameborder=»0″ allowfullscreen> — убрал галку “Показывать похожие видео…” (что добавилось в коде выделил красным).
Хозяйке на заметку: синим выделен идентификатор видео, указывающее YouTube какое именно видео воспроизводить в фрейме. Хотите поменять видео без изменения настроек отображения на сайте — просто поменяйте эту часть кода.
Как вставляются доп.коды
Как видите, доп.коды вставляются через знак ? после идентификатора видео. Знак ? ставится только перед первым доп.кодом, остальные вставляются через знак &. Например:
ET1ECoJqdGg? rel=0&showinfo=0&autoplay=0 » frameborder=»0″ allowfullscreen>
Другие коды, которые могут быть полезны:
Удачных вам экспериментов и CTR до неба!
Статья подготовлена при поддержке и соавторстве знакомого специалиста по YouTube Юрия Бледных в рамках конкурса «Контента много не бывает».
Если статья Вам понравилась, ставьте лайки, пишите комментарии.
Вставляем видео с YouTube на сайт
Здравствуйте, уважаемый посетитель!
Сегодня мы затронем еще один вопрос оформления контента и посмотрим, как можно вставить видео с YouTube на сайт.
Надо сказать, что хостинг YouTube с огромным количеством размещенных на нем видеоматериалов сейчас очень популярен. И использование его возможностей, несомненно, сможет в определенной степени повысить интерес пользователей к содержанию сайта.
При этом не надо забывать и о соблюдении требований авторских прав. Поэтому в данном случае мы рассмотрим вариант размещения видео с использованием функциональных возможностей, предлагаемых самим сервисом YouTube, а именно: с помощью стандартного видеоплеера YouTube. Что в соответствии с Условиями использования YouTube позволяет легально использовать этот сервис на своем сайте.
Однако, следует учесть, что предоставляемый сервисом YouTube HTML-код видеороликов предусматривает применение контейнера с фиксированными значениями ширины и высоты. Что несколько затрудняет использования такого видеоплеера при встраивании его на сайты с резиновой версткой.
Поэтому здесь будет показан не совсем ординарный, но достаточно простой способ использования стилей CSS. С помощью которого несложно будет решить эту проблему и отображать видео с YouTube с учетом резиновой верстки на всем диапазоне, который для нашего сайта составляет 320px÷1920px.
Получаем с YouTube нужный видеоролик
Как и ранее при создании сайта мы всегда стараемся использовать только легальные методы. И в данном случае мы не станем «по черному» скачивать видео и показывать его на своем сайте с помощью каких-либо сторонних видеоплееров. Так как такие действия, в случае отсутствия предварительного письменного разрешения YouTube, нарушают подпункт A пункта 5.1 Условия использования YouTube.
Причем в этом случае не нарушаются авторские права обладателей видео, так как для такого показа будут доступны только те продукты, владельцы которых не против встраивания их на другие сайты. А это относится к подавляющему большинству имеющихся на хостинге видеороликов.
Для этого с начала откроем главную страницу YouTube и после поиска по нужной тематике найдем возможные варианты видео, как показано ниже на скриншоте.
Рис.1 Подбор в YouTube видео нужной тематики
После того, как мы просмотрим и выберем для вставки в оформляемую статью наиболее подходящий видеоролик, через кнопку «Поделиться» в открытой вкладке выберем опцию «Встроить».
Рис.2 Выбор во вкладке Поделиться опции Встроить
Ну а теперь осталось лишь только обычным способом скопировать HTML-код выбранного видеоролика.
Рис.3 Копирование HTML-кода видеоролика
Таким образом мы получили HTML-код видео, который нужно вставить в оформляемую страницу.
width = «560» height = «315» src = «https://www.youtube.com/embed/ZRrxsFRszjg» frameborder = «0» allow = «autoplay; encrypted-media» allowfullscreen >
Рис.4 HTML-код видео с YouTube
В дополнение можно отметить, что получить HTML-код можно и другим способом. Для этого достаточно кликнуть правой кнопкой мыши по видео и в открывшемся окне выбрать опцию «Копировать HTML-код», как показано на следующем скриншоте.
Рис.5 Копирование HTML-кода другим способом
Правда, в этом случае в теге ширина и высота будут иметь другие значения. Но нам это не важно, так как далее при встраивании видеоплеера с помощью стилей CSS мы будем использовать не фиксированный его размер, а пропорциональный к ширине области контента.
Вставляем HTML-код видео в оформляемую страницу
Для того, чтобы иметь возможность отображать встраиваемое видео однотипно с используемыми в контенте изображениями, применим типовое решение по размещению графических элементов. При котором видеоплеер будет располагаться по центру с размером в 60% от ширины области контента (в предыдущей статье для этого типа мы определили класс «img-center60» ).
width = «560» height = «315» src = «https://www.youtube.com/embed/ZRrxsFRszjg» frameborder = «0» allow = «autoplay; encrypted-media» allowfullscreen >
Рис.6 HTML-код видео с YouTube
Если теперь открыть страницу с добавленным HTML-кодом, то можно увидеть, что видеоплеер поместился, как и предполагалось, в центре области контента. Однако, его размер не соответствует тому, каким он должен быть при нормальном отображении графических элементов.
Это обусловлено тем, что, как ранее отмечалось, в теге заданы фиксированные значения ширины и высоты. Что, естественно, не позволяет видеоплееру подстраиваться под нужный размер в зависимости от разрешения экрана.
К чему это приводит, можно увидеть на следующих скриншотах, где показаны варианты отображения видеоплеера при разных разрешениях экранов.
Рис.7 Вид видеоплеера с фиксированной шириной при разрешении 1920px.
Рис.8 Вид видеоплеера с фиксированной шириной при разрешении 1280px.
Как видно, такое отображение видеоплеера не может нас устроить. Поэтому для того, чтобы это исправить, сделаем некоторые преобразования.
Встраиваем видеоплеер YouTube с помощью стилей CSS
Для того, чтобы совместить встраиваемый видеоплеер с резиновой версткой сайта используем возможности, которые предоставляют свойства CSS. Так для блока-обвертки выполним следующие действия:
А для полученного с YouTube контейнера с классом «video-pleer» определим:
Это необходимо для того, что бы размер видеоплеера в дальнейшем определялся не фиксированными значениями ширины и высоты, а соответствовал размеру родительского блока. Который в свою очередь, помещенный в типовой контейнер с классом «img-center60» при использовании резиновой верстки подстраивался по ширине в зависимости от разрешения экрана.
В итоге все эти действия можно описать следующей таблицей стилей CSS: