Support » Plugin: Elementor Page Builder » Video on background – no loop

  • Resolved sparski



    I have added a new section with elementor to my website, set the background to an youtube video and it works, no problem here, but when the video ends and it just starts all over again.

    I would like to know if there is any way for the video to not loop while is set as background, just to stop to the last frame.

    I have added a video that ends with my logo. I just want to run it once, and to stop with the last frame where my logo shows. Is it possible?

    Thank you!

    P.S. I know that instead of setting it as background, I could insert a video (yt or vimeo) and set to no loop, but than two annoying things happen… 1) once the video stops, it will just display a first black frame 2) the play button appears on the screen. None of that is good, just want to run it once and stop to the last frame.

    • This topic was modified 1 year, 5 months ago by  sparski.
Viewing 3 replies - 1 through 3 (of 3 total)
  • This is a good feature request and I hope they consider it!

    Additionally the ability to define a loop start / stop period would be great, i.e. maybe only loop through the last 30 seconds of a video and never see the first part ever.

    In the mean time, I’d look to see if there was a javascript way to amend the youtube/vimeo script that does exactly what you want but that requires some coding knowledge and it may not be easy to do.

    Another simpler approach might be to use some styling trickery. For example, combined with z-index, a lower section the same exact height as the upper section containing the looping video might take advantage of negative top margin making it cover up the video loop while also having a fade-in-up transition, with a transition delay of however long you want the underlying video loop to be seen. Of course your lower section would need a background image of your logo that would cover up the looped video below it.

    This of course adds some challenges to editing as negative margins can also effect access to editor controls and the like. The best approach is to use custom css that only applies the negative margin on the front end.

    I use rules like body:not(.elementor-editor-active) #my-overapping-element { margin-top: -1200px } which keeps the section in place while editing but on the front end, slides it up over the previous section.

    Dear Sir,

    Thank you very much for your detailed answer.

    I have just begun with WP and Elementor 2 weeks ago, what you have said is too advanced for me. I just thought I missed an option or something.

    I made a simple video with Bitable just wanted to set it as background and the last frame to remain there.

    I have just re-read your trickery. That’s very nice 🙂

    Thank you once again and hopefully they will introduce some nice options in the future. Now, I just have to google some perfect loops videos, or a website that has something like that and can integrated my logo as well (similar to biteable – but perfect loops). Thx

    No prob. Best of success to you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Video on background – no loop’ is closed to new replies.