As I'm sure a number of you do, as a Beaver Builder "enthusiast", I keep one eye on the BB Slack channel, one on the Facebook group, and the other on my work (!!).
I noticed yet another useful tip from David Waumsley, who frequently seems to come up with innovative ways to control or modify his Beaver Builder sites - he's given me a few "Aha" moments in the past. You can find him at BeaverJunction.com and also find a link to his original video here.
In this instance, he'd come across a script that allows you to embed YouTube videos in a much more efficient way.
As a website optimisation 'nut', I stopped what I was doing and opened my code editor to create something that might make it a little easier for people to achieve the same thing, without copying and pasting JS in.
Here's a quick video of me demoing it, and surprise surprise, I've used the module to embed the video...
Key points to note:
- Supports YouTube and Vimeo, and uses FLBuilderUtils::get_video_data(), a native Beaver Builder method, to determine what type the video is, and to get it's ID
- Allows you to specify a play icon, colour and size to overlay on top - all from the module settings
- Uses DNS prefetch resource hints (although I still need to figure out if this is useful, as I've had to 'assume' some domains; I don't know if the domains I've added for each video type will change video to video)
From some basic tests, I've seen the following results:
YouTube "normal" embed:
- 914KB page load size (this might vary according to your setup/plugins etc)
- 53 requests
YouTube "optimised" embed:
- 363KB page load size (a WHOPPING 60% decrease!)
- 42 requests (20% decrease)
Vimeo "normal" embed:
- 574KB page load size
- 49 requests
Vimeo "optimised" embed:
- 382KB (33% decrease)
- 43 requests (12% decrease)
Although it seems very stable to me, I wouldn't recommend using this on live sites (AKA USE AT YOUR OWN RISK); perhaps download and test for a short while and give me as much feedback as possible in the comments below - I'll then fix up/adapt where necessary.
Update - 29/12/2016
After only a few hours of it being online, I've received some great feedback from people in the Beaver Builder Facebook group, so I've updated the plugin.
This is (mainly) for you, Bob!
- I've dropped the generic iframe field... Bob Huber kinda made me realise it was moot. I tend to disable all native BB modules, and build my own from scratch (hence my post on using Beaver Builder as a development platform), but of course others don't, and will still have the native 'Video' module which takes care of this.
- I've added the ability to add your own parameters to the video URL, such as rel=0 - this perhaps needs some testing, but it's there.
- I've cleaned up the plugin a bit, and now you'll see the module in it's own section, called WPD Modules, rather than cluttering up 'Advanced Modules'.
- I've also moved some stuff around behind the scenes, but had planned to cover these items in a tutorial post/video in the near future.
You'll need to overwrite the existing files via FTP.
Update - 30/12/2016
- David Waumsley kindly pointed out a couple of things I'd missed in the CSS file, where I'd left SCSS variables in a vanilla CSS file... doh! Now the container holding the video will have a black background after you click 'play', rather than it seemingly disappearing (ie it had a transparent background).
- I've also uploaded a small tweak to the JS which means it will render the video within the BB page builder preview, rather than just being a blank space - hopefully you can see from the (small) GIF below:
Update - 24/01/2017
- I've just moved the plugin to the WordPress.org Plugin Repository. Link below under 'Download'.
I've added the plugin to the regular WordPress.org plugins repository so that I can deliver updates more efficiently.
Search for WPD BB Additions when you add a new plugin in WP-Admin, or click here for the link to the plugin page.
You can also see the GitHub link here.
Bear in mind that this file is a 'shell' for future additions (I have a few things in the pipeline), so things might change, and if you're the inquisitive type, you'll see some empty folders inside the plugin which might give some hints as to what I've got planned!
I plan on writing a small tutorial on how I put this together, step by step, so if you'd find that useful, please let me know!
If this is a useful module, I would really appreciate it if you'd share it - thanks!