Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 24, 2024 at 4:51 am #1431841
    antdesign01

    Hi, Im trying to add a gradient overlay to an Avia Video Element containing a vimeo video, but some also are self hosted. The end result I am after is an 80% colour at the base fading up to a 0% colour at the top). I’ve tried several methods without success. Is this a possibility?

    January 24, 2024 at 1:20 pm #1431894
    Guenni007

    that video is a background-video or a placed video element?

    On video element try to set up a pseudo container – but best would be to set a custom class to the video

    .avia-video .avia-iframe-wrap:after,
.avia-video .mejs-container:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.01) 0%,rgba(6,133,229,1) 80%);
  opacity: 0.8;
  z-index: 5 !important;
  pointer-events: none;
}
    January 24, 2024 at 2:56 pm #1431912
    antdesign01

    Thank you. I’ll play around with that code and see if I can get it to work the way I am hoping.

    January 25, 2024 at 3:41 am #1431952
    antdesign01

    Just an update for you… this worked perfectly for what I wanted to achieve. Thank you again.

    January 25, 2024 at 7:34 am #1431965
    Ismael

    Hi,

    Awesome! Glad to know that @Guenni007 was able to help you out. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Avia Video Gradient Overlay’ is closed to new replies.