Как вставить только часть (кусок) видео с YouTube на сайт?
- Категория ~ Технические советы
- – Автор: Игорь (Администратор)
- Вставка части видео с YouTube на сайт
- Ручное изменение html-кода для вставки части видео с YouTube на сайт
- Используем сервис tubechop.com для вставки части видео с YouTube на сайт
Вставка части видео с YouTube на сайт
YouTube это достаточно полезный инструмент. Он экономит место на диске и не нагружает ваш сервер. И при этом позволяет просматривать видео с вашего сайта с высокой скоростью.
Тем не менее, иногда возникает необходимость вставить не все видео, а только его часть. Например, чтобы выделить наиболее важные моменты. И если не рассматривать сложные способы, которые потребуют от вас загрузить видео, затем с помощью специальных программ вырезать кусок, а потом снова загрузить обрезанное видео на YouTube.
То существует два простых способа.
Первый, это ручное изменение html-кода для вставки. К сожалению, в данном случае вы лишь можете задать время начала и окончания видео, при этом видео полностью останется доступным для просмотра.
Второй, это использовать специальные сервисы, которые действительно отображают только часть видео. Но, у них тоже есть проблема. Дело в том, что они изменяют не только начало и конец, но и перенаправляют видео через свои проигрыватели. А это значит, что если сервис будет недоступен, то посмотреть видео вы уже не сможете.
Тем не менее, оба способа позволяют за короткое время быстро реализовать задачу, хоть и со своими ограничениями.
Ручное изменение html-кода для вставки части видео с YouTube на сайт
Не смотря на то, что существует два варианта вставки: с использованием iframe и с использованием тега object. Необходимо изменять одни и те же параметры «start» и «end». Так, что не удивляйтесь, что действия очень похожи.
Параметр «start» задает время начало видео в секундах.
Параметр «end» задает время остановки видео.
Вставка с использованием iframe
Откройте любой редактор html или редактор исходного кода. Рассчитайте в секундах время начала и время окончания видео, и добавьте параметры «start» и «end» так, как показано на рисунке:
Обратите внимание, что перед параметрами необходимо поставить символ «?», иначе видео не будет загружаться.
Примечание: Символ «?» нужен для корректного составления Url.
Вставка с использованием тега object
Действия очень похожи на вставку в iframe, за исключением того, что параметры необходимо вставить в два места. В одну из секций «param» и в секцию «embed», как показано на рисунке:
В данном случае символ «?» не требуется, так как в ссылках уже есть параметры.
Используем сервис tubechop.com для вставки части видео с YouTube на сайт
Пользоваться этим сервисом очень легко. После того как сайт открылся, просто найдите нужное видео с YouTube.
Введите в поле поиска либо нужные слова, либо конкретную ссылку на ролик с YouTube. Интерфейс в чем-то пытается повторить сам youtube, поэтому разобраться в нем будет легко.
Для открывшегося видео выберите нужный диапазон, как это показано ниже на рисунке, и нажмите кнопку «Chop it».
После того как страница перезагрузится, перед вами появится пример того, как видео будет отображаться для пользователей. Сам код для вставки будет находится в поле «Embed Code» (чуть правее от видео).
Как видите оба способа достаточно простые и потребуют от вас минимум времени.
Рубрики:
- видео
☕ Понравился обзор? Поделитесь с друзьями!
- Как извлечь аудио из видео быстро и без потери качества?
- Как настроить прозрачность окон (границ) в Windows 7?
Добавить комментарий / отзыв
Как вставить видео с YouTube в WordPress
Очень часто при ведении блога возникает необходимость добавить в запись или страницу видео из YouTube.
Не вижу причин, почему бы вам не использовать данный сервис при размещении своих видео в интернете. Перечислю лишь некоторые из них, которые удерживают меня в этом сервисе.
YouTube для блоггеров удобен во всём:
- Самый известный и поддерживаемый всеми браузерами сервис
- При работе с видео позволяет добавлять необходимые эффекты
- Поддерживает качество видео до 4K, что очень круто!
- Работает на всех мобильных платформах
- Легко интегрируется во множество популярных CMS с помощью плагинов или iframe
- Имеет неплохую партнёрскую программу
В этой инструкции мы рассмотрим два способа добавления видео из YouTube на ваш сайт.
Видеоинструкция
Использование технологии oEmbed
Копировать информацию из основного сайта WordPress не буду, а просто дам ссылку, по которой подробно рассказано о технологии oEmbed и приведён список сайтов, с которых можно вставить мультимедийный контент в ваш сайт.
Если говорить коротко: сервис YouTube входит в список сайтов, поддерживающих технологию oEmbed, а это значит, что для вставки видео достаточно скопировать ссылку из адресной строки браузера и просто вставить в форму ввода текста в WordPress.
Давайте рассмотрим пример! 🙂
Возьмём, например, видео про Обзор сервиса TemplateMonster. Копируем ссылку из адресной строки браузера и просто вставляем в визуальном режиме редактора прямо в текст:
Вы не успеете заметить, как эта ссылка автоматически трансформируется в видео. Эта возможность появилась давно, но именно в режиме предпросмотра видео — в последнем обновлении WordPress. Я считаю это просто супер! 🙂
Ссылка преобразовалась в проигрывательЕдинственное неудобство здесь в том, что вы не сможете задать размер видео и оно каждый раз будет разного размера. Вероятнее всего это будет зависеть от максимально возможного размера самого видео, а может от чего-то другого. Честно скажу — не знаю. Но те видео, которые я готовлю в 720p и в 1080p, без исключений растягиваются по всей ширине страницы.
Как обойти ситуацию с размером видео и задать максимальный
Если вам необходимо для видео с низким разрешением задать максимальную ширину контейнера, например, 900 пикселей, то необходимо вставлять ссылку на видео, обернув его в код embed, который регулирует некоторые свойства.
Код embed принимает два параметра: width (ширина) и height (высота). Если их не указать любой из них, то он будет автоматически вычислен в зависимости от указанного значения.
Использовать тег embed без указания хотя бы одного из параметров смысла нет. Разве что в случае, когда вы не хотите видео предпросмотр видео прямо в редакторе WordPress.
Вернёмся к нашему коду. Например, я хочу для всё того же видео про сервис TemplateMonster указать максимальную ширину в 600 пикселей. В этом случае мне нужно будет указать через пробел параметр width=»600″, например, так:
Результат на сайте будет следующим (специально вставляю в снимок экрана дополнительный текст, чтобы вы увидели разницу при указании ширины видео):
Использование тега embedВ общем, технология oEmbed позволяет вам безо всяких лишних заморочек вставлять видео на ваш сайт, но если вам необходимо использовать дополнительные возможности (например, скрыть элементы управления в проигрывателе, показывать похожие видео и тому подобное), тогда вам придётся использовать второй способ вставки видео, которые работает на всех системах управления сайтами, включая статические HTML.
Вставка видео из YouTube через HTML-код
Второй способ гарантированно будет работать везде. Да-да, везде! 🙂
Особенность в том, что это обычный HTML-код, который использует тег iframe, позволяющий отобразить содержимое любой внешней страницы или сайта на вашем сайте. Проблем при его использовании лично я не вижу, годами люди пользуются и все довольны. Посмотрим? 🙂
Тут нюанс в том, что надо проделать дополнительные действия, когда вы находитесь в нужном вам видео. В первую очередь, это найти элементы управления под видео и перейти в раздел «Поделиться»:
Вам сразу будет доступен код для вставки видео на ваш сайт. Почти всегда предлагается самый популярный размер — 960 пикселей по ширине, который подходит к большинству сайтов, т.к. он оптимально отображается как на десктопных браузерах, так и на мобильных:
Но чаще всего приходится изменять его под размер вашего сайта, т.к. ширина текстовой области у всех разная (треть места занимает сайдбар, не забывайте об этом).
Давайте щёлкнем по полю «Выбор размер» и там выберем пункт «Другой размер»:
Рассматривать остальные возможности с «флажками» я не буду, т.к. это не относится к теме данной инструкции, вы можете самостоятельно их прощёлкать и посмотреть, как повлияет на ваше видео.
После выбора «Другой размер» форма ввода изменится и вы можете указать нужный вам размер видео. Я, например, задам ширину в 600 пикселей, а высота видео пропорционально изменится, чтобы ваше видео было с точно такими же пропорциями, как вы его записывали.
После этого вы просто копируете ссылку на ваше видео по примеру из скриншотов выше и всё, вставляете его в режиме «Текст» вашего редактора. Подробнее об этом я рассказал в заметке Использование текстового редактора это курса.
Внимание! Если вы вставите видео в визуальном редакторе, тогда HTML-код вашего видео преобразуется в такой вид, что видео не будет работать на сайте. Поэтому я настоятельно рекомендую переключаться в режим «Текст», чтобы видео при вставке вторым способом корректно отображалось на вашем сайте.
Заключение
Мы рассмотрели два популярных способа вставки видео из YouTube в сайт на WordPress. Конечно же, есть вариант с использованием плагина, но смысла в них нет, т.к. эти двух способов вам хватит на всю жизнь! 😉
Как встроить видео с YouTube в свои веб-проекты
Привет, приятель 👋,
Вы когда-нибудь задумывались, как видео с YouTube встраиваются в веб-страницы? Не беспокойтесь больше! Эта статья содержит два разных метода с пошаговым руководством о том, как встроить любое видео с Youtube на свою веб-страницу, используя только HTML и CSS.
Пример 📺
Предпосылка ✍️
В этой статье я буду использовать HTML-тег iframe, вот синтаксис:
Тег iframe используется для отображения веб-страницы или документа на другой веб-странице.
Атрибут iframe src принимает ссылку на внешний ресурс, который вы хотите внедрить.
Атрибут title важен для программ чтения с экрана, поэтому рекомендуется включать заголовок в теги iframe.
Вы можете узнать больше о теге iframe из W3schools
Давайте начнем без лишних слов
Два метода, которые мы будем изучать:
Метод Youtube Video ID.
Код для вставки видео на Youtube.
1. Идентификатор видео на Youtube
Каждое видео на Youtube имеет уникальный идентификатор, нам нужен только идентификатор видео, которое мы хотим встроить на наш веб-сайт.
Вы можете получить идентификатор любого видео Youtube из строки URL-адреса браузера следующим образом:
или щелкните правой кнопкой мыши видео Youtube, которое вы хотите встроить, и выберите опцию скопировать URL-адрес видео , как показано ниже:
Это создаст ссылку на YouTube ниже:
https://youtu. быть/25E6FPy9SPc
Этот метод удобен, когда у вас есть массив идентификаторов видео Youtube, и вам нужно отобразить их в пользовательском интерфейсе с помощью JavaScript.
Интересующий нас идентификатор видео на Youtube — 25E6FPy9SPc , и это единственное, что нам нужно получить с Youtube.
На Youtube также есть специальная ссылка для встраивания видео, которая выглядит так:
https://www.youtube.com/embed/videoID
Наш пример видео на Youtube выглядит так:
https://www.youtube.com/embed/25E6FPy9SPc
Теперь, когда у нас есть URL-адрес видео, мы можем создать новый тег iframe и вставить ссылку для встраивания в атрибут src в нашем HTML-файле, как показано ниже.
Вывод приведенного выше кода будет следующим:
Вы можете стилизовать iframe, обернув его родительским контейнером и установив iframe на 100% высоты и ширины родительского контейнера.
Поэкспериментируйте с кодом:
Take Aways
- iframe используется для встраивания видео с YouTube
- Используйте формат URL-адреса
- Оберните iframe родительским контейнером, чтобы облегчить отклик
- Заголовок iframe важен для чтения с экрана
Подведение итогов
В этой статье вы узнали о двух методах встраивания видео Youtube на свою веб-страницу.
Я рад, что вы дочитали эту статью до конца. Если вам понравилась эта статья и вы узнали что-то новое, я буду рад связаться с вами.
Давайте на связи
- Twitter @unclebigbay143
- LinkedIn @unclebigbay
До встречи в следующей статье. До свидания 🙋♂️
Если вы нашли мой контент полезным и хотите поддержать мой блог, вы также можете купить мне кофе ниже, мой блог живет на кофе 🙏.
Как встроить видео с YouTube
Существует множество причин, по которым вы можете захотеть поделиться видео с YouTube. Может быть, вы хотите добавить полезные видео на свой веб-сайт или поделиться своим последним творением на YouTube со своими подписчиками в социальных сетях.
Делиться видеоконтентом еще никогда не было так просто, а благодаря встраиванию видео на YouTube вы можете добавлять клипы прямо на любую платформу, которую используете. Мы здесь, чтобы показать вам, насколько просто это может быть, пытаетесь ли вы встроить видео YouTube в Документы Google, презентацию PowerPoint или твит.
Быстрые ссылки
- Что означает «Встроить видео»?
- Как встроить видео YouTube
- Встраивание с помощью HTML
- Встроить видео YouTube в PowerPoint
- Встраивание слайдов Google
- Встроить видео YouTube в электронную почту
- Встроить видео YouTube в Twitter 72 Встроить видео YouTube в Gmail 9090 Видео в Canva
- Canvas YouTube Embedded
- Google Doc YouTube Videos
Что означает «Встроить видео»?
Встраивание — это, по сути, копирование строки кода с одного веб-сайта и вставка ее на другую платформу, будь то другой веб-сайт, электронное письмо или твит.
Когда вы встраиваете видео, код загружает видео из источника (в данном случае YouTube) и воспроизводит его на любой платформе, которую вы используете, без необходимости загружать, а затем загружать видеофайл с YouTube.
Встраивание видео с YouTube экономит место на вашем сайте, что ускоряет его загрузку и позволяет вам делиться видеоконтентом, на который распространяются авторские права, поэтому вы не рискуете пересечь какие-либо юридические границы.
Как встроить видео с YouTube
Различные платформы и инструменты предъявляют свои требования к встраиванию видео с YouTube. Мы познакомим вас с некоторыми наиболее распространенными местами для встраивания видео.
Встраивание с использованием HTML
Источник: youtubeСкопируйте код встраивания YouTube, чтобы вставить его в HTML-раздел веб-страницы.
Если вы пытаетесь добавить видео на веб-сайт или в блог, самый простой способ сделать это — встроить видео YouTube в HTML.
Функция встраивания YouTube может сгенерировать для вас код. Перейдите к видео YouTube, которое вы хотите встроить, нажмите кнопку «Поделиться», затем нажмите «Встроить». Скопируйте код для встраивания, а затем вставьте его в соответствующее место в HTML-коде своей веб-страницы.
Это быстрое копирование/вставка будет работать в большинстве случаев, но если вы хотите внести какие-либо изменения в то, как видео будет отображаться на вашем сайте, вы можете самостоятельно создать код, используя эту базовую структуру встраивания:
Отсюда вы можете настроить размер дисплея, изменив числа, которые появляются после «ширины» и «высоты». Вы также можете включить дополнительные функции — например, чтобы включить автоматическое воспроизведение и отключение звука при загрузке веб-страницы, вам нужно будет добавить дополнительный фрагмент кода после URL-адреса видео.
youtube.com/embed/VIDEO ID ?autoplay=1&mute=1 «>
Встраивание видео с YouTube в PowerPoint
Источник: MicrosoftВстраивание в PowerPoint выполняется быстро и просто, достаточно указать URL-адрес.
Чтобы встроить видео в PowerPoint, перейдите на YouTube и скопируйте URL-адрес видео, которое вы хотите встроить. Получив URL-адрес, вернитесь в PowerPoint и на слайде, на котором вы хотите отобразить видео, щелкните раскрывающийся список «Вставить», затем «Видео» и выберите «Видео из Интернета». Всплывающее окно позволит вам вставить URL-адрес видео контента, который вы хотите встроить, и PowerPoint возьмет его оттуда. Легкий!
Встраивание Google Slides
Источник: Google SlidesВставка видео YouTube в Google Slides занимает всего пару кликов.
Научиться вставлять видео с YouTube в Google Slides легко и аналогично процессу для PowerPoint.
Откройте презентацию и нажмите «Вставить», затем нажмите «Видео». Это откроет панель поиска YouTube.
Поскольку Slides также является продуктом Google, вы можете искать видео напрямую с помощью этого инструмента или вставить URL-адрес определенного видео. Когда вы найдете видео, которое вам нужно, просто нажмите «Выбрать», и ваше встраивание будет завершено.
Встраивание видео YouTube в электронную почту
Источник: MicrosoftМногие поставщики услуг электронной почты позволяют встраивать видео, вставляя URL-адрес YouTube в сообщение электронной почты.
Для часто обновляемых коммерческих почтовых платформ, таких как Outlook, URL-адреса видео часто достаточно для встраивания вашего контента. Просто скопируйте и вставьте URL-адрес в тело письма.
Однако многие провайдеры, такие как Gmail, Yahoo! Почта, AOL и Почта Windows 10 не позволяют напрямую воспроизводить видео, поэтому вы не сможете встроить контент.
Обходной путь: сделайте скриншот видео.
Добавьте это статическое изображение в свое электронное письмо и свяжите его с URL-адресом видео на YouTube. Видео не будет воспроизводиться в папке «Входящие» вашего получателя, но это один из лучших способов поделиться видео, если их поставщик электронной почты не поддерживает воспроизведение в папке «Входящие».
Добавление видео YouTube в Gmail
Источник: youtubeЕсли вы хотите встроить воспроизводимые видео в Gmail, вам потребуется внешний подключаемый модуль или расширение.
Хотите знать, как встроить видео с YouTube в Gmail? Вам нужно будет установить плагин для встраивания или расширение для браузера, если вы хотите прямое воспроизведение в сообщении. Встраивание видео YouTube от cloudHQ и BombBomb Video — варианты с высоким рейтингом.
Если вы предпочитаете не использовать стороннее приложение, вы можете сделать снимок экрана части видео, включить это изображение в свое сообщение и связать изображение с URL-адресом видео на YouTube.
Это не настоящая вставка, но она позволяет пользователям щелкнуть изображение и посмотреть видео на YouTube.
Рассказывание историй с помощью фильмов: как создавать увлекательные видео для YouTube
Пройдите курс
Встраивайте видео YouTube в Twitter
Источник: TwitterYouTube YouTube totweets с YouTube или вставьте URL-адрес в новый твит.
Если вы хотите встроить видео YouTube в твит, и YouTube, и Twitter упростят этот процесс.
Во-первых, убедитесь, что вы вошли в свою учетную запись Twitter. Затем перейдите на YouTube, найдите видео, которое хотите встроить, и выберите значок «Поделиться». Рядом с опцией встраивания кода вы увидите несколько значков социальных сетей. Нажмите на значок Twitter, добавьте любой текст во всплывающем окне перед URL-адресом видео и нажмите «Твитнуть».
Кроме того, вы можете вставить URL-адрес видео YouTube прямо в новый твит.
Это создаст предварительный просмотр, и вы сможете добавить любой текст перед публикацией.
Встраивание видео YouTube в Canva
Источник: canva.comВключите параметр мультимедиа YouTube в разделе «Дополнительно», чтобы встроить видео YouTube в Canva.
Canva — отличный инструмент для создания всевозможных маркетинговых материалов или индивидуальных проектов. Сообщения в социальных сетях, школьные презентации или даже вступительные видеоролики для собеседования при приеме на работу — все это возможно благодаря встраиванию видео в шаблоны Canva.
Если вы хотите встроить видео YouTube в Canva, откройте существующий или новый шаблон проекта и нажмите «Еще» в меню слева. Отсюда выберите YouTube в разделе «Найти контент из». Затем вы можете вставить URL-адрес видео в строку поиска и перетащить его в шаблон проекта после его загрузки.
Canvas Встраивание YouTube
Источник: canvasБыстро добавляйте видео YouTube к своим заданиям Canvas с помощью панели инструментов.
Изучение того, как встраивать видео с YouTube в Canvas, важно, если вы используете платформу для занятий в школе или колледже.
Если вы находитесь в записи обсуждения, на странице или в задании, перейдите к месту в текстовом поле, где вы хотите, чтобы видео отображалось. На панели инструментов щелкните значок плагина и выберите YouTube в раскрывающемся списке. Используйте поле поиска, чтобы найти видео, которое вы ищете, и нажмите «Встроить».
Если у вас есть код для встраивания прямо с YouTube, вы можете нажать на значок облака в панели инструментов вместо заглушки и вставить туда код.
Документы Google YouTube Видео
Источник: Документы GoogleИспользуйте Google Slides, чтобы добавить видео YouTube в Документ Google.
В настоящее время нет прямого способа встроить видео в Документ Google, но есть обходной путь с помощью Google Slides, если вам нужно включить видео в документ.
Откройте новую презентацию Google Slides, нажмите «Вставить», затем выберите «Видео» и вставьте URL-адрес YouTube.