Responsive video in Slideshow (Narrative theme)

Highlighted
New Member
2 0 2

Hi, when using the Narrative theme and adding a video to the slideshow on the main homepage, you don't see the video on a mobile phone. I think I know that this is happening because of a css media query, but I don't know what I should change in the code to display the video even on a mobile. On a mobile only an image is shown...Please help! :)

.slideshow {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
    max-height: calc(100vh - 35px)
}

.slideshow--adapt {
    background-color: #c4c2c0
}

.slideshow--full .slideshow {
    height: calc(100vh - 35px)
}

@media only screen and (max-width: 749px) {
    .slideshow--adapt .slideshow {
        max-height: 125vw;
        min-height: 75vw
    }
}

.slideshow__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3
}

.slideshow__slide {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 0;
    transition: all 0.5s cubic-bezier(0, 0, 0, 1)
}

.slideshow__slide--active {
    transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    opacity: 1;
    z-index: 7
}

.slideshow__slide--transitioning {
    opacity: 1;
    z-index: 6
}

.slideshow__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 6;
    transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87), filter 400ms, -webkit-filter 400ms;
    font-family: "object-fit: cover"
}

.slideshow__image .placeholder-background {
    background-color: #e3e3e3
}

.slideshow__image .placeholder-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    max-height: none;
    max-width: none;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.slideshow__video, .slideshow__video iframe {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    pointer-events: none
}

.slideshow--adapt .slideshow__video, .slideshow--adapt .slideshow__video iframe {
    min-height: 56.25vw
}

@media only screen and (max-width: 749px) {
    .slideshow__video, .slideshow__video iframe {
        display: none
    }
}

@media (min-aspect-ratio: 16 / 9) {
    .slideshow__video, .slideshow__video iframe {
        height: 300%;
        top: -100%
    }
}

@media (max-aspect-ratio: 16 / 9) {
    .slideshow__video, .slideshow__video iframe {
        width: 300%;
        left: -100%
    }
}

.slideshow__video--loaded:not(.slideshow__video--paused) .slideshow__video,
.slideshow__video--loaded:not(.slideshow__video--paused) .slideshow__video iframe {
    opacity: 1;
    visibility: visible
}

.slideshow__video::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5
}

.slideshow__play-button {
    opacity: 0;
    position: relative;
    margin: 0 auto;
    height: 50px;
    width: 50px;
    padding: 0;
    transition: transform 0.5s ease
}

.slideshow__play-button:hover {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.slideshow__play-button:hover, .slideshow__play-button:disabled {
    opacity: 0
}

.slideshow__video--loaded .slideshow__play-button {
    opacity: 1
}

@media only screen and (max-width: 749px) {
    .slideshow__play-button {
        display: none
    }
}
Highlighted
New Member
2 0 2

Nobody?

Highlighted
New Member
2 0 0

I have the same question - any solution?

0 Likes