Как добавить видео на сайт html с ютуба: Как вставить видео с YouTube на сайт: пошаговая инструкция

Как вставить видео в HTML на сайт с YouTube, Instagram и Tik Tok

Это уже не ноу-хау, что вставка видео на сайт принесет владельцу пользу. В интернете люди предпочитают просмотр чтению.  А это увеличивает конверсии. Это мотив, чтобы разобраться как вставить видео в html на сайт.

Вы можете задаться вопросом – почему просто не загрузить файл на сайт и покончить с хлопотами? Google говорит, что медийные ролики увеличивают время загрузки страницы, снижают скорость и, негативно влияет на SEO. Следовательно, автор может потерять трафик.

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

Содержание

1. Часть I: Что такое встраивание видео?
2. Часть II: Преимущества встраивания перед загрузкой
3. 1. Увеличение времени просмотра сайта
4. 2. Встраивание не грузит сервер
5. 3. Не ограниченный размер файла
6. 4. Качество воспроизведения
7. Часть III: выбор видеохостинга
8. Адаптивный плеер
9. Скорость и качество обслуживания
10. Конфигурации проигрывателя
11. Особенности лидогенерации
12. Конфиденциальность
13. СЕО
14. Аналитика и сбор данных
15. Тарифы хостинга
16. Часть IV: как генерировать код встраивания
17. Встраивание видео с хостинга
18. YouTube
19. Vimeo
20. Wave. video
21. Wistia
22. Vidyard
23. Встраивание видео из социальных сетей
24. Facebook с Instagram
25. Twitter
26. Tik Tok
27. Генераторы кода
28. Часть V: Как вставить видео в html на сайт
29. Встраивание видео в HTML-код страницы
30. Встраивание в сайты на WordPress
31. Добавление в интернет магазин Shopify
32. Блоги на Squarespace
33. Сайты на Wix

Часть I: Что такое встраивание видео?

Главный элемент – это код встраивания. Код вставки видео в html — это фрагмент HTML-кода, который используют для добавления клипов и других типов контента на сайт.

Этот фрагмент кода помогает отобразить медиа — файлы на странице. Он извлекает ролик из своего первоначального источника, не заставляя размещать его на свой сайт. Это означает, что ролик не повлияет на скорость загрузки страницы.

При встраивании ролика на сайт сам файл остаётся на прежнем месте, а при загрузке перемещается на ваш сервер.

Хотя десятки хостингов предлагают автоматическую генерацию встраивания, следует понимать структуру кода.

Знание основ HTML позволит вам настроить код встраивания вручную: изменить высоту и ширину ролика или заблокировать функции, которые вы не хотите отображать на своей странице.

Часть II: Преимущества встраивания перед загрузкой

Когда вы загружаете клип на свой сервер, его воспроизведение может затягиваться. Что снижает время загрузки страницы.

1. Увеличение времени просмотра сайта

Таким образом, зрители могут долго ждать загрузку ролика, а паузы провоцируют отказ от просмотра. Встраивание видео  поддерживает скорость сайта на сбалансированном уровне и не ухудшает СЕО.

По словам Джона Мюллера из Google, скорость загрузки влияет на ранжирование.

Посмотрите график, который показывает, как время загрузки веб — страниц влияет на конверсии:

Увеличение загрузки означает снижение трафика и доходов!

Но есть и плюсы:

• Воспроизведение медиа файлов увеличивает время, которое люди проводят на сайте.
• Ролик может появиться на первой странице в Google и начать генерировать трафик.

Делайте настройку правильно: выбирайте опцию встраивания вместо загрузки.

2. Встраивание не грузит сервер

Загрузка роликов на сервер снижает пропускную способность вашего собственного сервера. И каждый раз, когда кто-то ссылается на ваш клип или вставляет его на свою страницу, ваш собственный сайт страдает.

Поскольку загрузка создаёт дополнительную нагрузку на пропускную способность сервера. Это дорого и неэффективно.

3. Не ограниченный размер файла

Хостинги ограничивают клиентов на объем загружаемых файлов. Каждый раз, когда вы загружаете медиа файл, вы занимаете место на своем сервере.

Загружая десяток файлов, вы можете занять слишком много места. Если 5 — 6 пользователей просматривают ролик одновременно, время загрузки упадёт.

Встраивание видео не ограничивает размеры файлов.

Также, существует вопрос ограничения размера файла для загрузки. Хостинги вводят жесткие ограничения на формат и размеры файлов.

Поэтому загрузка требует сжимать ролики.

4. Качество воспроизведения

От ограничений размера файла мы переходим к ограничениям качества видео. Чтобы hd ролики не тормозили ваш сайт, храните их на стороннем сервере. Это гарантирует, что вы останетесь в пределах “лимита индекса” хостинга.

Вам не придется преобразовывать медиа файлы в десятки форматов и версий, чтобы зрители могли просматривать ролики в высоком или низком разрешении.

Часть III: выбор видеохостинга

Решив вставить видео на сайт, вы перекладываете все заботы о загрузке сервера и изменении формата файлов хостингу. Чтобы встроить клип на свой сайт, нужно добавить его на сторонний хостинг. И здесь у вас есть большой выбор.

Адаптивный плеер

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

Это помогает избежать статических размеров, которые искажают макеты страниц, деформируют изображение или отображают черные полосы вокруг экрана.

Скорость и качество обслуживания

Когда выбираете хостинг, проверьте два пункта качества обслуживания:

1. Поддержка качества показа. Сегодня вы не можете показывать зернистые кадры и анимацию в разрешении 360p или 480p. Современное разрешение составляет 1080p минимум. Убедитесь, что хостинг поддерживает Ultra HD или больше. Лучшие хостеры предлагают автоматическое переключение между качеством HD / SD.
2. Качество серверов, которые использует сервис. Происходят ли сбои ответов сервера. Подвержен ли хостинг DDoS-атакам и среднее время отклика на запросы их клиентов.

Конфигурации проигрывателя

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

Особенности лидогенерации

Если вы добавляете видео на свой сайт, оно становится частью машины лидогенерации. Убедитесь, что провайдер поддерживает лидогенерацию через медиа файлы.

Поддержка лидогенерации подразумевает призывы к действию и способы сбора информации о посетителях (лидах).

Конфиденциальность

При работе в интернете защищайте свою информацию. То же самое относится и к конфиденциальности видео.

Хостинг не должен давать смотреть и скачивать ролики без разрешения автора. Поэтому служба хостинга должна устанавливать строгие правила загрузки файлов и следить за соблюдением этих правил.

СЕО

Если вы хотите повышать поисковый рейтинг собственного сайта, вы должны стратегически мыслить при выборе хостинга. Ищите стабильный и популярный в рейтинге Google хостинг.

Размещение ваших файлов на внешнем сайте — хостере обеспечит вас обратными ссылками. Что увеличит доверие поисковых систем для вашего домена. Это повлияет и на рейтинг в поиске.

Аналитика и сбор данных

Если цель роликов в привлечении клиентов, то хостер должен дать доступ к аналитике:

• Статистика просмотров и комментариев.
• Опция для отслеживания Google Tag Manager, чтобы получать дополнительные сведения в Google Analytics.

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

Тарифы хостинга

Когда рассмотрите все опции, посмотрите как платформа соответствует вашему бюджету. Тариф зависит от того, сколько просмотров вы ожидаете, и насколько велики файлы.

Рост просмотров тяжёлых клипов будет означать, что вы используете больше пропускной способности, и цена будет выше. Также стоит проверить, позволяет ли платформа заключать ежемесячные или годовые контракты.

Если вы занимаетесь малым бизнесом или только начинаете работать с медийными файлами, связываться с долгосрочными контрактами не следует.

Часть IV: как генерировать код встраивания

После того, как вы выбрали хостинг и загрузили контент, нужно сгенерировать код для вставки видео на сайт.

Встраивание видео с хостинга

Рассмотрим как вставить видео в html на сайт с разных хостингов.

YouTube

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

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

Если нужно продолжить настройку, выбирайте из параметров: автозапуск и цвет, язык и циклирование и другие опции для добавления в буфер iframe embed.

Vimeo

Код вставки видео в htm Vimeo можно найти, нажав на значок Поделиться в правой части ролика. Вы увидите окно с рамками, и одна из них — это код встраивания.

Нажав на кнопку + Показать параметры, вы можете настроить способ отображения через кода встраивания. Вы можете изменить цвет плеера, его размер, добавить видео заставку для интро и опции циклирование и автозапуск.

На тарифах Pro, Business или Premium, вы получите доступ к настройке цвета и компонентов, сможете сделать конечную заставку для видео и логотип.

Wave.video

Чтобы встроить ролик из Wave.video, перейдите в раздел Мои видео и найдите клип, который нужно встроить. Нажмите на кнопку «Настроить “и откройте вкладку” Встраивание».

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

Чтобы настроить плеер, откройте вкладку «Preview» и поменяйте цвет проигрывателя. Выберете элементы управления или пользовательский шаблон.

Wistia

Перейдите на свою страницу мультимедиа и нажмите кнопку Embedded & Share. Вы увидите экран Embed & Share, где можете скопировать и отредактировать тип кода встраивания.

Хостинг Wistia предлагает два типа интеграции:

1. Встроенные коды для размещения клипа внутри текста.
2. Вставки Popover делают ролики всплывающими над текстом страницы.

Vidyard

Хостинг Vidyard поддерживает два варианта встраивания:

• Адаптивное встраивание.
• Встраивание iframe.

На панели инструментов Vidyard щелкните раздел «Содержимое»> «Плеер», наведите курсор на плеер и нажмите «Поделиться».

Под опцией Responsive Embed просто щелкните значок Copy Code и выберите опцию Use Lightbox, чтобы превратить код во встраивание lightbox. Вы можете вручную ввести размеры плеера, чтобы изменить ширину и высоту.

Если ваш сайт не поддерживает JavaScript, выбирайте опцию «Проблемы со встраиванием» и копируйте код вставки в буфер iframe.

Встраивание видео из социальных сетей

Социальные сети работают на отдельных серверах, и выполняют роль хостингов. Чтобы вставить видео на сайт из социальных сетей нужно скопировать код как на хостингах.

Facebook с Instagram

Каждый медийный файл на Facebook поддерживается функцией встраивания. Выберите опцию “…” в правом верхнем углу поста Facebook и нажмите “Embed. ”

Выбирайте опцию «включить полный пост» (нажмите на флажок), и система добавит текст из поста Facebook вместе с роликом.

Поскольку Instagram принадлежит Facebook, процесс встраивания очень похож. Откройте Instagram с рабочего стола (а не из приложения) и нажмите на кнопку “…” в правом верхнем углу.

Нажмите на кнопку «Вставить», и скопируйте код. Система предложит выбор: добавлять или нет заголовок.

Twitter

Чтобы встроить клип из Twitter, не используйте приложение. Откройте твитер на рабочем столе и выберите “встроить твит» из выпадающего меню, расположенного рядом с кнопкой ”следовать» на твите. Затем выберите опцию «встроить твит».

Просто скопируйте код вставки – но обратите внимание, что с добавиться весь твит с подписью. Отобразить только клип нельзя.

Tik Tok

В Tik Tok кнопка «Получить код вставки» появляется на клипе. В Тик Ток нет выбора: вы получите ссылку на плеер 340×700 с автозапуском.

Настроить опции можно при добавлении кода вставки на свою веб — страницу.

Генераторы кода

Если по какой-то причине вы не хотите следовать простым шагам для добавления кода с хостинга или социальных сетей, то, есть обходной путь.

Альтернативный метод – десятки генераторов html кода. Сайты Embed.ly, Toolki и Siege Media генерируют код встраивания.

Все, что нужно сделать, это добавить URL — адрес клипа, и генераторы автоматически создадут код встраивания.

Но этот обходной путь с недостатками:

• Изображение будет промаркировано водяным знаком.
• Настройка воспроизведения в генераторах усечённая.
• Эти платформы не дают аналитику или статистику в Google Analytics.

Для аналитики добавляйте ролики на хостинги.

Часть V: Как вставить видео в html на сайт

Теперь, когда вы вооружены знаниями о преимуществах встраивания медиа файлов, и знаете, как выбрать хостинг и сгенерировать код встраивания, мы расскажем, как разместить видео на сайте.

Встраивание видео в HTML-код страницы

ШАГ 1: Редактирование HTML — кода

Откройте страницу, на которую планируете вставить ролик, в режиме редактирования. Выберите точное место в коде, в котором должно появиться видео, и поместите туда курсор.

ШАГ 2: Копирование кода вставки

Скопируйте свой код вставки и просто вставьте его в то место, на которое вы поместили курсор. Нажмите кнопку «Сохранить” или «Опубликовать».

Дважды проверьте, отображается ли видео там, где вы добавили код. Следите за статистикой страницы.

Встраивание в сайты на WordPress

Если ваш сайт работает на WordPress, есть два пути встраивания.

# 1 Вставка через URL — адрес

Для самых популярных хостингов Vimeo и YouTube не нужен код встраивания. Просто скопируйте URL-адрес клипа и вставьте его в визуальный редактор – код вставки будет создан автоматически.

# 2 Код вставки

Иногда нужно добавить настройки к дисплею, или сохранить ролики на платформе, которая не поддерживается автоматическим встраиванием WordPress. Тогда придется использовать код вставки.

Перейдите в текстовый редактор WordPress (не путайте с визуальным редактором), и вы увидите HTML-версию своей страницы.

Затем просто следуйте инструкциям, которые мы упомянули выше, как вставить видео в html на сайт.

Добавление в интернет магазин Shopify

• Скопируйте код вставки с хостинга.
• Войдите в панель администратора Shopify. Все текущие страницы должны быть перечислены в разделе интернет-магазин — > страницы. Перейдите на страницу, которую планируете отредактировать.
• Кнопка «Вставить видео”. Выберите редактор rich text и на панели инструментов нажмите на значок камеры. Появится новое окно – добавьте код вставки через опцию «Вставить видео».

Блоги на Squarespace

Когда нужно вставить видео на сайт в Squarespace действия похожи на WordPress. Вы можете выбрать между добавлением кода или вставлять URL-адреса файлов. Это возможно только при встраивании с YouTube, Vimeo, Animoto или Wistia.

Поскольку Squarespace — это конструктор сайтов, добавляйте любой формат файлов. Скопируйте URL-адрес ролика или нажмите значок вставки (выделен красным кружком). Вы увидите всплывающее окно, через которое можно добавить клип.

В Squarespace вы можете настроить заголовок и описание клипа. Сняв флажок “Использовать миниатюру”, вы можете добавить на страницу обложку для видео.

Сайты на Wix

Wix работает на тех же принципах, что и предыдущие CMS системы. Только опция копировать и вставить URL поддерживает ролики с YouTube, Vimeo, DailyMotion и Facebook.

# 1 Вставка URL — адреса

Шаг 1: откройте редактор.

Нажмите на значок » + » в левой части редактора и выберите клип. В разделе Single Video Player выберите платформу, с которой добавляете видео — YouTube, Vimeo, DailyMotion или Facebook.

Шаг 2: скопируйте URL-адрес.

Нажмите на кнопку «Изменить видео» и скопируйте URL — адрес ролика. На этом шаге вы можете настроить параметры воспроизведения.

Шаг 3: отрегулируйте положение ролика.

Используйте перетаскивание, чтобы изменить положение и размер ролика. Сохраните страницу.

# 2 Видео в HTML

Если вы не размещаете ролики на хостингах, поддерживаемых Wix, скопируйте html код:

• Нажмите кнопку “Еще”.
• Откроется HTML-iframe, куда можно вставить код встраивания.
• Нажмите кнопку «Сохранить».

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

Напишите в комментариях, какую тему добавить к этому руководству. Какие вопросы остались без ответа?

Как вставить только часть (кусок) видео с 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 на html-страницу

Видео с YouTube на ваш сайт

YouTube разместит ваши видео, и вы сможете легко встроить их на свой веб-сайт. В следующем HTML-коде показано, как встроить видео YouTube на веб-страницу.

Как добавить видео YouTube на свой веб-сайт — шаги

Все, что вам нужно сделать, это скопировать и вставить URL-адрес видео с YouTube на вашу HTML-страницу.

Как получить URL-адрес Youtube?

Используйте сайт YouTube, чтобы найти видео, которое вы хотите встроить.

Щелкните ссылку «Поделиться» под своим видео на YouTube, чтобы просмотреть доступные параметры обмена.

Когда вы нажмете «Поделиться», появится еще одна кнопка «Встроить», которая появится под кнопкой «Поделиться»

Нажмите кнопку «Встроить», и вы увидите поле чуть ниже, заполненное кодом.

Если щелкнуть мышью в текстовом поле, заполненном кодом, весь текст в этом поле будет выделен. Щелкните правой кнопкой мыши в текстовом файле и скопируйте код.

Следующим шагом будет вставка кода на HTML-страницу. Полный исходный код выглядит следующим образом:

Тег объекта HTML

Вы можете вставлять видео с YouTube в html без тега iframe. Вы можете использовать тег объекта HTML для встраивания мультимедиа (например, аудио, видео, апплеты Java, ActiveX, PDF и Flash) на свои веб-страницы.

Автозапуск видео на Youtube

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

0 означает, что вы НЕ хотите, чтобы видео воспроизводилось автоматически (по умолчанию)

1 означает, что вы хотите, чтобы видео воспроизводилось автоматически

Повтор видео на Youtube (цикл)

Параметр цикла определяет, будет ли видео YouTube воспроизводиться автоматически или нет. Параметр цикла принимает следующие значения:

0 означает, что вы НЕ хотите, чтобы видео зацикливалось (по умолчанию)

1 означает, что вы хотите, чтобы видео зацикливалось

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

Вставить видео с YouTube в html5

ПРИМЕЧАНИЕ. В настоящее время вы не можете извлечь исходный код видео без нарушения условий обслуживания YouTube. Единственный поддерживаемый способ встраивания видео на веб-страницу — это встраивание iframe.

Но это можно сделать с помощью библиотеки MediaElement.js. По следующей ссылке показано использование видео YouTube с тегом, но также есть запасной вариант для Flash для браузеров, которые его не поддерживают.

http://mediaelementjs.com/examples/?name=youtube

Как сделать встроенное видео YouTube адаптивным?

Следующий исходный код делает ваше видео на YouTube адаптивным.

Добавление видео YouTube в PowerPoint

Презентации PowerPoint могут сильно различаться в зависимости от стиля человека, который их создает. Для кого-то очень легко создать учетную запись YouTube и загрузить свои собственные видео. Итак, если у вас есть видео на YouTube, которое вы хотите встроить в свою презентацию, вы можете выполнить простые шаги, описанные ниже, чтобы узнать, как это сделать. Есть несколько способов сделать это. Самый простой способ — просто скопировать код для вставки из видео на YouTube и вставить его в PowerPoint. Второй вариант — загрузить видео с YouTube, а затем вставить его как файл фильма в PowerPoint.

Использовать код для вставки Youtube

1. Откройте PowerPoint и щелкните слайд, на который вы хотите добавить видео.

2. Следующим шагом будет переход на вкладку «Вставка».

3. Затем нажмите «Видео», а затем «Онлайн-видео»

.

4. Щелкните внутри поля поиска справа от параметра YouTube, затем введите поисковый запрос для своего видео и нажмите Enter на клавиатуре.

5. Выберите видео, которое хотите вставить в презентацию, затем нажмите кнопку «Вставить» в нижней части окна.

Перетащите видео в нужное место на слайде. Обратите внимание, что вы можете изменить его размер, щелкнув одно из полей по периметру видео и перетащив его соответствующим образом.

Скачать и вставить

Загрузите видео с YouTube с помощью любого программного обеспечения или любого другого веб-сайта.

Выполните описанные выше шаги 1 и 2.

Выберите видео на моем ПК…

Из диалогового окна… Найдите загруженный фильм, и он будет вставлен в презентацию.

Перетащите видео в нужное место на слайде. Обратите внимание, что вы можете изменить его размер, щелкнув одно из полей по периметру видео и перетащив его соответствующим образом.

ДАЛЕЕ….. Что означает x86 и x64

Как встроить видео YouTube в ваши веб-проекты

Привет, приятель 👋,

Вы когда-нибудь задумывались, как видео YouTube встраивается в веб-страницу? Не беспокойтесь больше! Эта статья содержит два разных метода с пошаговым руководством о том, как встроить любое видео с Youtube на свою веб-страницу, используя только HTML и CSS.

Пример 📺

Предпосылка ✍️

В этой статье я буду использовать HTML-тег iframe, вот синтаксис:

• Тег iframe используется для отображения веб-страницы или документа на другой веб-странице.

• Атрибут iframe src принимает ссылку на внешний ресурс, который вы хотите внедрить.

• Атрибут title важен для программ чтения с экрана, поэтому рекомендуется включать заголовок в теги iframe.

Вы можете узнать больше о теге iframe из W3schools

---

Без лишних слов, давайте начнем

Мы рассмотрим два метода:

1. Метод Youtube Video ID.

2. Код для вставки видео на Youtube.

---

1. Идентификатор видео на Youtube

Каждое видео на Youtube имеет уникальный идентификатор, нам нужен только идентификатор видео, которое мы хотим встроить на наш веб-сайт.

Вы можете получить идентификатор любого видео Youtube из строки URL-адреса браузера следующим образом:

или щелкните правой кнопкой мыши видео Youtube, которое хотите встроить, и выберите параметр копировать URL-адрес видео , как показано ниже:

Это создаст ссылку на YouTube ниже:

 https://youtu.be/25E6FPy9SPc
 

Этот метод удобен, когда у вас есть массив идентификаторов видео Youtube, и вам нужно отобразить их в пользовательском интерфейсе с помощью JavaScript.

Идентификатор видео на Youtube, который нас интересует, — 25E6FPy9SPc , и это единственное, что нам нужно получить с Youtube.

На Youtube также есть специальная ссылка для встраивания видео, которая выглядит так:

 https://www.youtube.com/embed/videoID
 

Наш пример видео на Youtube выглядит так:

 https://www.youtube.com/embed/25E6FPy9SPc
 

Теперь, когда у нас есть URL-адрес видео, мы можем создать новый тег iframe и вставить ссылку для встраивания в атрибут src в нашем HTML-файле, как показано ниже.

 <ифрейм
src="https://www.youtube.com/embed/25E6FPy9SPc"
title="игра для разработчиков"
>
 

Результат приведенного выше фрагмента показан ниже:

Вы можете воспроизвести видео.

Мы также можем установить ширину и высоту тега iframe следующим образом:

Вывод приведенного выше кода будет следующим:

Вы можете стилизовать iframe, обернув его родительским контейнером и установив iframe на 100% высоты и ширины родительского контейнера.

Поэкспериментируйте с кодом:

---

Take Aways

1. iframe используется для встраивания видео с YouTube
2. Используйте формат URL-адреса https://www.youtube.com/embed/videoID для встраивания видео Youtube на свой веб-сайт
3. Оберните iframe родительским контейнером, чтобы упростить реакцию
4. Заголовок iframe важен для чтения с экрана

---

Подведение итогов

В этой статье вы узнали о двух методах встраивания видео Youtube на свою веб-страницу.