.custom-player {
   position: relative;
   width: 100%; /* Плеер будет занимать всю доступную ширину */
   max-width: 100%; /* Максимальная ширина — 100% от родительского контейнера */
   margin: 20px auto; /* Центрируем плеер */
   background-color: #000; /* Черный фон */
   border-radius: 15px; /* Скругляем углы */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Тень вокруг плеера */
   overflow: hidden; /* Скрываем лишние элементы */
   padding-top: 56.25%; /* 16:9 соотношение сторон */
}

.custom-iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%; /* И iframe будет растягиваться на всю ширину */
   height: 100%; /* И высота iframe будет 100% от контейнера */
   border: none; /* Убираем стандартную рамку */
   border-radius: 15px; /* Скругленные углы */
}

/* Мобильная версия */
@media (max-width: 768px) {
   .custom-player {
       max-width: 100%; /* Растягиваем на всю ширину экрана */
       margin: 10px auto; /* Уменьшаем отступы */
       padding-top: 56.25%; /* Сохраняем 16:9 соотношение сторон */
   }

   .custom-iframe {
       height: 100%; /* Высота iframe теперь будет 100% от родителя */
   }
}