Eliminate Overlay on Video and Resize on Mobile

Site URL: https://hippopackaging.com/video

I'd like to eliminate the Gray overlay on this page video https://hippopackaging.com/video

Also would like the video to resize proportionally on mobile. At the moment you can see only the middle part on mobile.

Thank you

#1. Add to Design > Custom CSS

/* Video remove overlay */
body#collection-62a7b676976324300a753cd9 .Intro--has-image:before {
    background-color: unset;
}

#2. Use this CSS

@media screen and (max-width:640px) {
body#collection-62a7b676976324300a753cd9 {
.Parallax-item iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section.Intro {
    height: 200px !important;
}
.Parallax-item figure {
    transform: unset !important;
    top: 0 !important;
    bottom: 0 !important;
}
.Parallax-item {
    transform: unset !important;
    top: 0 !important;
}}
}

On 6/26/2022 at 1:13 AM, tuanphan said:

#1. Add to Design > Custom CSS

/* Video remove overlay */
body#collection-62a7b676976324300a753cd9 .Intro--has-image:before {
    background-color: unset;
}

#2. Use this CSS

@media screen and (max-width:640px) {
body#collection-62a7b676976324300a753cd9 {
.Parallax-item iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section.Intro {
    height: 200px !important;
}
.Parallax-item figure {
    transform: unset !important;
    top: 0 !important;
    bottom: 0 !important;
}
.Parallax-item {
    transform: unset !important;
    top: 0 !important;
}}
}

 

This worked perfectly, Thank you so much @tuanphan