.video-container {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 по умолчанию для десктопа и средних экранов */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Для планшетов и больших телефонов (ширина до 768px) */
@media (max-width: 768px) {
    .video-container {
        padding-bottom: 50%;  /* Компактнее */
    }
}

/* Для маленьких телефонов (ширина до 480px) */
@media (max-width: 480px) {
    .video-container {
        padding-bottom: 40%;  /* Ещё компактнее */
    }
}

/* Для портретной ориентации (вертикальные экраны) */
@media (orientation: portrait) {
    .video-container {
        padding-bottom: 60%;  /* Немного выше для вертикали */
    }
}

/* Для ноутбуков (ширина от 1024px до 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .video-container {
        padding-bottom: 56.25%;  /* Оставляем 16:9, но можно добавить эффекты */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);  /* Лёгкая тень для "рамки" */
    }
}

/* Для ПК с большой диагональю (ширина от 1440px и выше) */
@media (min-width: 1440px) {
    .video-container {
        padding-bottom: 62.5%;  /* Немного выше, около 16: