Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 29, 2025 at 1:18 pm #1480438
    mruthalvarez

    Hi. I need to put a video at the top of the site’s homepage, and I can’t find a solution that works on both desktop and smartphone. I’ve tried colorsection with backgroud, just the video, all types of slides. I need this video to work responsively, I don’t want to replace it with a fallback image. Does anyone have any suggestions for me?
    Thank you so much!

    March 29, 2025 at 1:42 pm #1480440
    Mike

    Hey mruthalvarez,
    Try using the LayerSlider.

    Best regards,
    Mike

    March 29, 2025 at 4:39 pm #1480454
    mruthalvarez

    Hi Mike, thanks so much for replying!

    I would like the user to have a more pleasant experience when entering the site, with a video running on the page without the visual pollution that appears with the vimeo or youtube player.
    Simply the video running, and a phrase on top of it, for the 20 or 30 seconds that it is, until the loop.
    I haven’t managed to do this yet. Even in the slide layer.
    Any other tips?
    Thanks!

    March 29, 2025 at 4:52 pm #1480456
    Mike

    Hi,
    The LayerSlider with a video as the background and a text layer for the phrase over it.
    Self-host your video instead of using vimeo or youtube, otherwise try another plugin like revslider to achieve.

    Best regards,
    Mike

    March 29, 2025 at 7:56 pm #1480463
    Guenni007

    You can do that with code-block element inside color-section. Best is to better select – a custom class for the color-section.
    in my example page it is: html5-video

    see code and example on : https://webers-testseite.de/html5-video-embed/

    btw: if you change some declaration inside the given css code – this overlay might be fixed :
    (change means not to replace the whole rule but just to f.e. change the position to fixed – the rest of the declarations had to be in place.)
    f.e.:

    .responsive #top #wrap_all .html5-video .container {
  clip-path: inset(0 0 0 0);
}

#top .html5-video .overlay {
  position: fixed;
  top: 0;
  transform: translate(-50%, 25vw);
}

    or you shift the next section over the first one … etc.

    March 30, 2025 at 8:55 am #1480465
    Guenni007

    does it work for you?

    March 31, 2025 at 2:57 pm #1480531
    mruthalvarez

    Good morning @Guenni007!
    I’m not a developer, so I don’t really know how to make this change… I’m afraid that when I do it, I’ll always have to do it with the new theme updates.
    I was hoping that I could do it with the settings of the theme itself, which was sold to me as being responsive, and had this option of video as the background of the section.
    But I’ll try to understand better what you’ve suggested. Thank you very much!

    March 31, 2025 at 3:49 pm #1480532
    Guenni007

    https://webers-testseite.de/html5-video-fanlokbun-2/
    test my example page on your phone if it is working there.

    I’m not sure if there’s anything else I can tell you, other than what you can see on the page.
    On top ? Well it is the first color-section on that page. If you like to have it behind header – then you had to choose the enfold transparency option for the page.

    Color-Section with custom-class: html5-video ; inside that color-section a code-block element and column (custom-class: overlay) with your image (logo). The width of that column is ruled by css.

    If you do not need an overlay for your video – then put inside only the codeblock element.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.