.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% от родителя */
    }
}