/*********************************************/
/* YT Portrait video embed plugin by Team TP */
/*********************************************/

/*
.cpve-portrait-video-wrapper {
    position: relative;
    padding-bottom: 177.78%; 
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 20px;
}

.cpve-portrait-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

.cpve-portrait-video-wrapper {
    position: relative;
    width: auto;
    max-height: 80vh; /* Limit the height to 80% of the viewport */
    margin: 0 auto; /* Center horizontally */
    background: #000; /* Background color to fill the space */
    display: flex; /* Use flexbox to center the video */
    justify-content: center; /* Horizontally center the video */
    align-items: center; /* Vertically center the video */
}

.cpve-video-iframe {
    width: auto; /* Width auto to maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    max-width: 56.25vh; /* Maintain the 9:16 aspect ratio with height limit */
    max-height: 80vh; /* Ensure iframe doesn’t exceed 80% of the viewport height */
}

.cpve-video-iframe iframe {
    width: 100%;
    height: 100%;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) { /* Adjust max-width as needed for tablets or smaller screens */
    .cpve-portrait-video-wrapper {
        max-width: 90vw; /* Max width 90% of the viewport width */
        width: 90%; /* Alternatively, use 90% of the parent element's width */
        height: auto; /* Auto height to maintain aspect ratio */
    }

    .cpve-video-iframe {
        width: 100%; /* Full width of the wrapper */
        height: auto; /* Maintain aspect ratio */
        max-width: 90vw; /* Ensure iframe doesn’t exceed 90% of the viewport width */
    }

    .cpve-video-iframe iframe {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
    }
}