Адаптация размера плеера 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