Create and Optimize a Self-Hosted Video Background for Free

[@alex-650]

Super helpful to show that a video background doesn’t always mean a poor page speed.

[@JackCao]

That was my past believe as I saw lots of "Expert" bloggers talking about it. But when I experimented with it, the data says otherwise. Glad I tested it!

[@faithnomore101]

10k subs. finally! you earned it. next goal 15k till 2022!

[@JackCao]

Thank you so much for your support! ❤

[@webgeneral]

One of the best channels outthere when it comes to WordPress knowledge!

[@deltasignshopinc]

Amazing video, I just dont understand why only 2755 views. This content is great for small business owners/web designers/one-man show. You might need to change the video title to target more business owners. On the other side, the second step took my video from 4 to 10 mb.

[@TiagoDezan]

Great tutorial Jack!! Thanks for this awesome video!!

[@JackCao]

You are welcome! 😁

[@Rem_Oz]

Thank you! Very useful and just on the point. One of the greatest tutorials on the topic.

[@scotnery]

bro! amazing! thank you for putting so much work into making this exactly what's needed!

[@kamaboko1]

Great video. Interesting results though. Cloudconvert took a 3.2mb mp4 file and blew it up to 8.5mb webm file. I did it twice incase there was a glitch on the first one, but the second try produced the same results. I followed everything to a T with your instructions.

[@comleonmoto]

Thank you Jack. Clear and well documented, as always 🤩

[@onurazorqs9516]

exactly what i was looking for. Thanks man!

[@constancephoto6512]

Thank you! Another great video-excellent instruction with amazing resources. I have struggled to put all this together.

[@JackCao]

Glad it was helpful! 😊

[@KR-dk3eb]

Excellently explained!👍

[@euchoulis]

Good job Jack !

[@JackCao]

Thank you! 😃

[@JackyShalala]

It helped me to reduce the size of my video from 19 mb to 10 mb!

[@freekrider803]

very helpful thanks jack. I need some full website build from scratch tutorial.. can u make it ?? with any free gutenberg blocks with any niche like school, hotel, theaters, restaurants etc.... Thank you...

[@chinghong3943]

Thank you Jack. Very informative. I use Openshot to reduce file size for videos. But from this video, I now get to know more resources to reduce video file size. Thanks

[@JackCao]

Thanks for sharing openshot! 😊

[@iwbowden]

Excellent video, Jack! I have done a lot of experimentation to find the best "recipe" for doing this and didn't even get close to the small file size that you did. It's unfortunate that Canva's video editing tool will only dissolve between cuts. This means that there's still a sharp cut when the video loops and begins playing again.

[@nardog10]

Another nice great video my friend

[@JackCao]

Thank you! 🙂

[@marcoballesteros1013]

Hope you can do a new video with divi speed update. seeing that its the classic builder

[@fabrictexture4767]

Great jack more updated video regarding this??

[@SchinTeth]

Thank you for the tips, helped me alot

[@hadiibrahim07]

Great tutorial!

[@kazafinn]

Excellent video. Thanks

[@pawekowalski510]

Jack I kicked off my progress with WP after seeing a couple of your videos. Today I'm looking for free video gallery plugin which allows me to insert 2-3 columns videos on my website. I only need play button and if I play or second video the first played video stops and the second play. It would be nice to add short description over the video. Could you recommend something?

[@JoeGator23]

When you say self-hosted you mean that we run the new file from our media folder? Thanks for the awesome video. You always have useful videos, cheers to you!

[@JackCao]

Yup. That's what I meant 😁

[@JoeGator23]

@@JackCao Thanks for the quick reply, cool!

[@thesnazz1790]

Hey Jack! Is the WebM video format able to play on Safari?

[@eRodriguezART]

Hey Jack, great video, alot of good tips. I compressed a video from MP4 into webm. But turns out, ios users that visit the website will not be able to play the video. Is there an alternative compression method or extention that would work for everyone?

[@lecongminh3964]

Good Job, thanks Jack. It's Best

[@JackCao]

I'm glad you like it

[@mecrayavcin]

Hi jack what is the best size for a background video? How many mb? You are a speedjunky so i wanted to ask this Thanks

[@sootedninjas]

how do you do a Ken Burns Effect on background images with gutenberg

[@DesDreckett]

Awesome video once again! Thx

[@JackCao]

Glad you enjoyed it!

[@anaisbernardin6352]

but with which themes we can put a video in the background

[@LeirbagLinares]

Could you make a video of LMS ´s like LearnDash, Tutor, Lifter with Gutenberg?

[@JackCao]

Will do that soon! 😊

[@MichaelFidelis]

Good day Jack! I used three clips for a video and compressed the combined clips in a video per your instructions. However, one of the resolutions of the three videos was larger than the other two. In playback, that video frame gets larger than the others. You would think using the compression tool and 16:9 would render them the same?

[@JackCao]

Did you remember to expand the video covering all the white spaces in the video frame? If you have done that, there shouldn't be any inconsistency in playback. Send me an email with the links to the 3 videos for me to check it out 😊 [e-mail]

[@URandomGuy]

NICE!❤

[@JackCao]

Thanks 🔥

[@danielstojanovski9244]

Amazing, thanks.

[@JackCao]

You are welcome!

[@MaryamKainat-y8g]

but how to put that video as a background

[@rishabhchoudhary4284]

Still waiting for your video on user registration and building profile pages on wordpress. my site is incomplete without it.

[@JackCao]

Registration to Courses or as a Customer? Or why would you need a user to register? I think Woocommerce has those pages in place, and I think I have done a WooCommerce Tutorial on Account pages.

[@rishabhchoudhary4284]

@@JackCao i have a blog and i want user to register on it without WooCommerce. I am confused which plugin i should use to design their profile and account pages. Is it possible without plugin?

[@inlandnwdesign]

awesomeness

[@nyshimura]

muito bom! valeu!

[@Agileslick]

Thanks

[@JackCao]

You are welcome! 😁

[@AdityaSingh-ni7vn]

How to make this mobile responsive and also playable in ios mobiles

[@vwtourandtransportbali6555]

jack I already reach on desktop 100 Google page speed couse of you, can you chek for my web ?? I need on mobile, in mobile, I just reach in 70, I don't know whats is the problem and I already try to find but i think i don't know

[@JackCao]

Your page happen to have KZbin Embedded Video or running ads?

[@vwtourandtransportbali6555]

@@JackCao ads

[@AV-jz6wr]

It's all cool, but Webm doesn't play on mobile.. so basically useless.