/* Scale the entire video container (optional) */
#player {
    width: 100%; /* Adjust to desired width */
    max-width: 100%; /* Ensure it doesn't exceed screen size */
    position: relative;
}

/* Quality Selector Styles (Custom Button) */
#quality-selector {
    font-size: 18px; /* Adjust size of the dropdown */
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: inline-block;
    cursor: pointer;
}

/* Scaling the dropdown button inside quality selector */
#quality-selector select {
    font-size: 18px; /* Font size of the dropdown items */
    padding: 5px;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Adjust video controls (play, pause, etc.) */
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-mute-button {
    transform: scale(2); /* Increase button size */
}

/* Scale the play button, pause button, etc. on hover (optional) */
video::-webkit-media-controls-play-button:hover,
video::-webkit-media-controls-volume-slider:hover,
video::-webkit-media-controls-fullscreen-button:hover,
video::-webkit-media-controls-mute-button:hover {
    transform: scale(2); /* Slightly larger on hover */
}

/* Scaling buttons for Firefox */
video::-moz-media-controls-play-button,
video::-moz-media-controls-volume-slider,
video::-moz-media-controls-fullscreen-button,
video::-moz-media-controls-mute-button {
    transform: scale(2); /* Adjust button size */
}

/* Scale the video container button when in full-screen mode */
#player:-webkit-full-screen video::-webkit-media-controls {
    transform: scale(2); /* Adjust size of all controls in full-screen */
}

/* Scale the quality selector when hovering */
#quality-selector:hover {
    transform: scale(1); /* Increase size slightly on hover */
}

/* Adjust Play/Pause button size for the default video controls */
video::-webkit-media-controls-play-button {
    font-size: 30px; /* Adjust play button size */
}

/* Adjust volume slider button size */
video::-webkit-media-controls-volume-slider {
    height: 10px; /* Adjust volume slider height */
}

/* Full-screen button size */
video::-webkit-media-controls-fullscreen-button {
    font-size: 30px; /* Adjust fullscreen button size */
    margin-left:10px;
}






/* Ensure the player’s height does not exceed 500px */
#player {
    max-height: 400px; /* Maximum height of the video player */
    width: 100%; /* Set width to 100% to make it responsive */
    position: relative; /* Ensures correct placement of quality selector */
    overflow: hidden; /* Hide content that overflows the maximum height */
}

/* Video element should fit within the player */
video {
    width: 100%; /* Make the video responsive */
    height: 100%; /* Ensure video takes up the height of the container */
    object-fit: contain; /* Maintain aspect ratio without stretching */
    background-color:#000;
}

/* Optional: For smaller screens, ensure the player size remains manageable */
@media (max-width: 768px) {
    #player {
        max-height: 300px; /* Reduce max height for smaller screens */
    }
}

/* Optional: Ensure full-screen does not affect layout */
#player:-webkit-full-screen video {
    max-height: 100vh; /* Full-screen video height */
    object-fit: contain; /* Ensure aspect ratio is preserved in full-screen */
}