While working on a project for a client I found a really neat function within the Elementor page builder. The need for videos has increased like crazy & having functional videos on a website is attractive but can severely hinder performance. Obviously most videos require a lot more memory than pictures so including them slows page upload speeds & if your site is for commercial purposes, can lose you business. BOO! So why not speed them up while designing them to match the page? Solution: An overlay image.
So here’s the trick & may or may not ever be applicable to you, BUT if you love Elementor & its design capabilities you should give it a try. When editing your video if you can put an overlay that matches the desired site design over the actual video & save it. (I then recommend optimizing that video to reduce it’s file size.) Make sure you save a .png version of your desired overlay because you will use it again. I have included a picture of what I mean by an overlay (you may refer to it as a frame).
The video would play within the white space of the ‘star’ while the background (gray) matches the background of the website. This allows unnecessary data to be omitted from the video file & allows you to design it specifically for the website. Obviously you don’t have to make it a star, but it saves A LOT of space.
Once uploaded to Elementor, using their video element, you will then place the same frame as an overlay image. NOTICE: this is important because it will insure that you video is completely covered & cleanly matching the page. I was getting videos (averaging 10 sec) with their accompanying images under 200KB!
'