Как использовать iframe API для поиска ссылки на Youtube и воспроизведения видео на странице веб-сайта

Это мой первый пост!

Я покажу вам, как использовать iframe для поиска и воспроизведения видео на YouTube на одной и той же странице веб-сайта. Чтобы добавить больше функциональности, я добавил функцию поиска, позволяющую пользователям искать видео после копирования ссылки на видео. Я использовал html, css и javascript!

HTML-СТРАНИЦА

По нажатию кнопки поиска вызывается функция searchVideo.

Скрипт

Youtube iframe предоставляет пример встраивания видео на веб-сайт.

Общая функция поиска

1. Получение ссылки пользователя на Youtube в качестве входных данных

2. Я использовал REGEX для извлечения идентификатора видео из ссылки на Youtube.

3. Вставьте идентификатор видео в ссылку iframe:

4. Вставьте iframe

// This code loads the IFrame Player API code asynchronously.

// This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.

// The API will call this function when the video player is ready.

5. CSS

Конечный результат

Я надеюсь, что это поможет вам! Можно добавить больше функциональности. Спасибо за чтение.