Адаптация размера плеера Youtube на JavaScript, CSS.

Вопрос к AI ChatGPT-4: Как сделать адаптацию размера плеера Youtube под пропорции видео и страницу сайта на десктопе и мобильной версии, на javascript, css. Пример с пояснением работы.

Для адаптации размера плеера YouTube под пропорции видео и страницу сайта на десктопе и мобильной версии, вы можете использовать следующий код на JavaScript и CSS:

<div id="youtube-player"></div>

// Получаем элемент плеера YouTube
var playerElement = document.getElementById('youtube-player');

// Задаем размеры плеера
function resizePlayer() {
  var width = playerElement.offsetWidth;
  var height = width * 0.5625; // Используйте соотношение сторон своего видео (обычно 16:9)
  
  playerElement.style.height = height + 'px';
}

// Вызываем функцию изменения размера плеера при загрузке страницы и изменении размера окна браузера
window.addEventListener('load', resizePlayer);
window.addEventListener('resize', resizePlayer);

/* Стиль для контейнера плеера */
#youtube-player {
  position: relative;
  width: 100%; /* Может быть адаптирован под ваши нужды */
}

Этот код будет автоматически устанавливать высоту плеера YouTube, основываясь на его ширине и процентном соотношении сторон (обычно 16:9). Он также будет обновлять размер плеера при изменении размера окна браузера.

Не забудьте добавить API YouTube Player в ваш проект. 
Вы можете найти дополнительную информацию и примеры использования на странице документации YouTube Player API:
©https://developers.google.com/youtube/iframe_api_reference