ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- I'll show you how to Source, Create, and Optimize a Video for your site's background using only free tools available online. If you want to know how to add a video background to a WordPress Site, check out this tutorial: • Create A Personal Port...
If you do some research, a lot of blogs mentioned that you should never self-host your video, or video background because it will slow down your website, and I agree, to a certain extend.
You can definitely self-host a video for background and still pass core web vitals. It is a matter of knowing what are the best practices as well as the right methods to optimize a video file size before uploading to a website.
So, this video is all about helping you create that lightweight video for free to be used on your site background.
👉 Create a Personal Portfolio Website with WordPress Gutenberg Blocks: • Create A Personal Port...
Step 1: Source for Royalty Free Videos 02:04
Sites where you can source for Royalty Free Videos:
1. Pexels: www.pexels.com
2. Videezy: www.videezy.com
3. Pixabay: pixabay.com
4. Videvo: www.videvo.net
5. Life of Vids: www.lifeofvids.com
6. Coverr: coverr.co
Remove Audio Tool:
👉 ezgif.com/mute-video
Step 2: Combining Royalty-Free Videos 04:41
Free Video Editing Tool:
👉 www.canva.com/create/videos
Step 3: Video Optimization 08:02
1. Video Compression Tool (Reducing File Size of Video):
👉 www.freeconvert.com/video-com...
2. Converting MP4 to WEBM + Adjusting Resolution
👉 cloudconvert.com/video-converter
🔨 Other Recommended WordPress Tools:
✅ WordPress Hosting:
👉 Cloudways: jackcao.com/cloudways
✅ WordPress Speed Optimization Tool:
👉 WP Rocket: jackcao.com/wprocket
✅ WordPress Themes:
👉 Kadence WP: jackcao.com/kadence (10% OFF: JCSAVE10)
👉 Blocksy Theme: jackcao.com/blocksy (10% OFF: JCBLOCKSY)
✅ WordPress Gutenberg Blocks:
👉 Stackable Blocks: jackcao.com/stackable (10% OFF: JACKCAO10)
👉 Kadence Blocks: jackcao.com/kadence-blocks (10% OFF: JCSAVE10)
🔔 Subscribe for more WordPress Related Content: jackcao.com/subscribe
⌚ Chapters (Timestamps):
00:00 Introduction
02:04 Sourcing for Royalty-Free Videos
04:41 Combining Royalty-Free Videos and Adding Transitions using Canva
08:02 Video Optimization
11:25 Comparison between Different Compression Rate
12:37 Outro
📽 More Helpful Videos:
✅ 11 Gutenberg Block Plugins: • Top 11 Gutenberg Block...
✅ Will Multiple Gutenberg Blocks Slow Down WordPress Site: • Will Multiple Gutenber...
✅ Site Speed Case Study: • Case Study: Speed Up W...
✅ Build a Fast Loading Home Page: • Build a Fast Loading H...
✅ Improve Site Speed (9 tips): • How to Speed Up Your W...
✅ Build a Lead Capture Page with Gutenberg Blocks: • How to Create a Lead C...
🎥 Recommended Playlist:
✅ WordPress Gutenberg Tutorials for Beginners: • WordPress Tutorial for...
✅ Woocommerce Tutorials for Beginners: • Woocommerce Tutorial
✅ Improve Site Speed (Case Studies): • Site Speed Improvement...
✅ Start an Affiliate Blog: • Blogging for Profits -...
✅ Pinterest Affiliate Marketing: • Pinterest Affiliate Ma...
✅ Affiliate Marketing Tutorials: • Affiliate Marketing
✅ Start a Personal Brand: • Personal Brand Website...
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won't put anything here that I haven't verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#videobackground #videobackgroundwordpress #videobackgroundspeed #optimizevideofilesize #optimizevideo #optimizevideoforweb #jackcao
![[TH] VALORANT Champions Seoul - Group Stage Day 5 - DRX vs FNC](http://i.ytimg.com/vi/EGLDAmaBOhU/mqdefault.jpg)
Thank you Jack. Clear and well documented, as always 🤩
bro! amazing! thank you for putting so much work into making this exactly what's needed!
Thank you! Very useful and just on the point. One of the greatest tutorials on the topic.
exactly what i was looking for. Thanks man!
Great tutorial Jack!! Thanks for this awesome video!!
You are welcome! 😁
Excellently explained!👍
Thank you! Another great video-excellent instruction with amazing resources. I have struggled to put all this together.
Glad it was helpful! 😊
Thank you for the tips, helped me alot
Great tutorial!
Excellent video. Thanks
Super helpful to show that a video background doesn’t always mean a poor page speed.
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!
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
Thanks for sharing openshot! 😊
Good job Jack !
Thank you! 😃
10k subs. finally!
you earned it. next goal 15k till 2022!
Thank you so much for your support! ❤
One of the best channels outthere when it comes to WordPress knowledge!
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.
Awesome video once again! Thx
Glad you enjoyed it!
awesomeness
Good Job, thanks Jack. It's Best
I'm glad you like it
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.
Another nice great video my friend
Thank you! 🙂
Amazing, thanks.
You are welcome!
It helped me to reduce the size of my video from 19 mb to 10 mb!
muito bom! valeu!
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.
NICE!❤
Thanks 🔥
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?
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...
Thanks
You are welcome! 😁
Great jack more updated video regarding this??
Hope you can do a new video with divi speed update. seeing that its the classic builder
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
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?
how do you do a Ken Burns Effect on background images with gutenberg
Hey Jack! Is the WebM video format able to play on Safari?
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?
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 😊 jack@jackcao.com
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!
Yup. That's what I meant 😁
@@JackCao Thanks for the quick reply, cool!
but how to put that video as a background
Could you make a video of LMS ´s like LearnDash, Tutor, Lifter with Gutenberg?
Will do that soon! 😊
How to make this mobile responsive and also playable in ios mobiles
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
Your page happen to have TH-cam Embedded Video or running ads?
@@JackCao ads
Still waiting for your video on user registration and building profile pages on wordpress. my site is incomplete without it.
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.
@@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?
It's all cool, but Webm doesn't play on mobile.. so basically useless.
Excellent! Where and how do we apply the final overlay?
Check this out: th-cam.com/video/Nt12feCh0NQ/w-d-xo.html 😊