.video-player {
    padding-top: 32px;
    margin-bottom: 22px;
}

.video-player>.inner {
    position: relative;
    /* or whatever their textbox widget max-width is */
    max-width: 100%;
    margin: 0 auto;
}

.video-player .title {}

/* This is a fix for an issue caused by Foundation */
.video-player button {
    margin: 0;
}

.video-player .plyr__control--overlaid {
    border: 3px solid #fff;
    border: 3px solid var(--plyr-video-control-color, #fff);
    background: rgba(0, 0, 0, .7);
    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, rgba(0, 0, 0, .7))));
}

.video-player .plyr--video .plyr__control.plyr__tab-focus,
.video-player .plyr--video .plyr__control:hover,
.video-player .plyr--video .plyr__control[aria-expanded="true"] {
    background: #000;
    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #000)));
    color: #fff;
    color: var(--plyr-video-control-color-hover, #fff);
}

/* .slideshow container */
:is(.slideshow_container, .slideshow-container) .video-player>.inner {
    max-width: 100%;
}