You are awesome! I have been trying for a month to get video as a background and watched to many TH-cam videos to count! You helped me tremendously! Thank you!
Please how do I create full-width sliders on the header of an Astra Theme? I will really appreciate it if you can do a video on it or provide a guide. Thank you
My video background has no sound. I need something that is silent on loading but has a volume control. Gonna keep looking. Thank you for the excellent tutorial!
I am looking to have a video as the header with sound. Any ideas. I am able to add a TH-cam video on the page but not as a header. I am going to keep doing my research. 🙂
Good plugin as you suggested. But watching the Self hosted video I am not sure as to how you added it , though for the youtube we can see the url box appears but I cant see an option how to add the self hosted video, unless I drag and add a video block in this section. Please clarfy thanks
Great ! If you want to add an real background video with Gutenberg, you can use Custom layouts with a video block you will add to the "astra_body_top" hook. I simply used a "video" HTML tag. And some Custom CSS to fix the appearance : video { object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
Would you be able to add a hosted (TH-cam/Vimeo) video in this method? And how would the video be 'tied' to the cover block text elements, so for instance the following content wouldn't start overlapping the video on certain screen sizes?
Again an awesome guide. Thank you. Just wondering, where can I find the tutorial video about BLOGs and BLOG Archive, setup with a Gutenberg Template. The Customizer settings are self explaining ... but, a tutorial about how to use a more compelling template is what we do need.
Beatris, the blog archive section offers limited customization options from Gutenberg as of today, but the theme that you use might offer some options. However, with FSE making waves in WP, I'm expeciting that to change soon. We are planning some detailed content around the block editor, which should help you out.
It appears that you can now add multiple various text & other blocks to a cover block. We're using WP5.8.1 and have a cover block with background video that has a separator and 2 headings over it. But what about bandwidth issues on a looping video? Our video is only 12 seconds, and 8MB (your example appeared to be 91MB!!). And with the site in development, and ONLY myself viewing or working on it, we're seeing 1GB+ of bandwidth due to this video on some days! It seems like just having the video showing in tab may cause exponential bandwidth usage, but not sure how to precisely test this to be sure. Options? We don't like adding additional plugins for front-end display if at all possible, especially as we assume that free plugin is prob not the top priority for those developers, in case anything goes wrong in future. Any other options??
Thanks for the update Kenny... as for the bandwidth usage, there is nothing you can do except keep the video extremely short and compress it heavily. I'll look for solutions where you can add hosted videos as video backgrounds, so server resources can be preserved.
Good tutorial! Value for time
You are awesome! I have been trying for a month to get video as a background and watched to many TH-cam videos to count! You helped me tremendously! Thank you!
Happy to hear you liked the video, Nora! Your feedback is much appreciated.
What about full width backgrounds like your TH-cam screen shot shows?
Elementor tutorial for this please.
Please how do I create full-width sliders on the header of an Astra Theme?
I will really appreciate it if you can do a video on it or provide a guide. Thank you
great video
Thanks! Glad you liked it! 🙂
How do you add video using Elementor?
You don't
AWB seem's not responsive why it's not fit size automatically on mobile ?
Awesome Video - Really helped
...aaaaand subscribed.
My video background has no sound. I need something that is silent on loading but has a volume control. Gonna keep looking. Thank you for the excellent tutorial!
I am looking to have a video as the header with sound. Any ideas. I am able to add a TH-cam video on the page but not as a header. I am going to keep doing my research.
🙂
Hey! Awesome, I got this to work - what about make it fit the mobile version?
Thank you for investing in Gutenberg 👌👌👌
Our pleasure!
Thank you
You're welcome :)
Good plugin as you suggested. But watching the Self hosted video I am not sure as to how you added it , though for the youtube we can see the url box appears but I cant see an option how to add the self hosted video, unless I drag and add a video block in this section. Please clarfy thanks
This plugin works with wpbakery?
Would you please do this on elemental? Thank you.
Thank you!!!!!!!!!
Please include an Elementor video tutorial demonstrating this process.
Is there already a video showing on how-to with Elementor? Couldn´t find anything :(
Great !
If you want to add an real background video with Gutenberg, you can use Custom layouts with a video block you will add to the "astra_body_top" hook. I simply used a "video" HTML tag.
And some Custom CSS to fix the appearance :
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
Yup, that works too. Thanks for commenting. :)
Would you be able to add a hosted (TH-cam/Vimeo) video in this method? And how would the video be 'tied' to the cover block text elements, so for instance the following content wouldn't start overlapping the video on certain screen sizes?
Wow fantastitc !!!
Glad you like it!
Elementor tutorial, please!
Elementor tutorial for this please
Will work on it soon :)
Curious if the background videos play on mobile view?
The plugin I mentioned does have an option to enable videos on mobile. :)
Again an awesome guide. Thank you. Just wondering, where can I find the tutorial video about BLOGs and BLOG Archive, setup with a Gutenberg Template. The Customizer settings are self explaining ... but, a tutorial about how to use a more compelling template is what we do need.
Beatris, the blog archive section offers limited customization options from Gutenberg as of today, but the theme that you use might offer some options. However, with FSE making waves in WP, I'm expeciting that to change soon. We are planning some detailed content around the block editor, which should help you out.
Would you be able to create a tutorial for video backgrounds into the BigCartel platform?
I'll have to take a look, but we usually make WordPress tutorials :)
awesome
Great
Thank you.
Hi, Also create video for Elementor
Sure. Noted :)
It appears that you can now add multiple various text & other blocks to a cover block. We're using WP5.8.1 and have a cover block with background video that has a separator and 2 headings over it.
But what about bandwidth issues on a looping video? Our video is only 12 seconds, and 8MB (your example appeared to be 91MB!!). And with the site in development, and ONLY myself viewing or working on it, we're seeing 1GB+ of bandwidth due to this video on some days! It seems like just having the video showing in tab may cause exponential bandwidth usage, but not sure how to precisely test this to be sure. Options?
We don't like adding additional plugins for front-end display if at all possible, especially as we assume that free plugin is prob not the top priority for those developers, in case anything goes wrong in future.
Any other options??
Thanks for the update Kenny... as for the bandwidth usage, there is nothing you can do except keep the video extremely short and compress it heavily. I'll look for solutions where you can add hosted videos as video backgrounds, so server resources can be preserved.
@@BrainstormForce If you use a video hosted on TH-cam, it wouldn't eat the bandwidth because it's playing off their servers.
@@amfAR yes, either bandwidth or space, have to choose over a path.
elementor pls
Sorry I got it now, possiblly by clicking the button MP4 and adding the self hosted video
"upgrade your plan to use video covers" :/
Elementor
Will work on it soon :)
Elementor Please
Will work on it soon :)
Elementor, please.
Will work on it soon :)
elementor need
We will upload in the future regarding Elementor.
element or
Will work on it soon :)
elementor
Elementor
Will work on it soon :)
Elementor please
Will work on it soon :)
elementor please
elementor
Elementor
Will work on it soon :)
Elementor please
Elementor
Will work on it soon :)
Elementor
Elementor
Elementor
Elementor
Elementor
Elementor
Elementor
Elementor