Optimised YouTube & Vimeo Embeds for Beaver Builder

Hello everyone!

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)
  • The JavaScript written in David's example has been re-written in jQuery, to make it slightly easier to digest

Performance Increase

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)

Not bad!

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'.

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!

Here's the thing... I love to write and teach, but I'm terrible at self-promotion. If you found this article interesting, I'd really appreciate if you'd share this article with people you think would also enjoy it.

25 thoughts on “Optimised YouTube & Vimeo Embeds for Beaver Builder

    • Thanks, David. I hope it’s useful, although I do imagine it might need refining slightly with feedback. I’m thinking of releasing some other modules, so I might need to better separate them in the Page Builder (rather than under ‘Advanced Modules’). Thanks for sharing too.

  1. Thanks Doug for creating this module. This will save me a lot of time. I do have one question. Is it possible to have the video open up in a lightbox instead of just playing in its current spot? If so, would you have any suggestion on how that may be implemented?

    Thanks.

    • Hey Steve! Thanks for dropping by!

      Good question – currently no. Although funnily enough, I did record a quick screencast last night about something I’ve been tinkering with that will let you do that. I’m just waiting to see if it’s something that is of interest to the BB community before I spend too much time polishing the code for public consumption 🙂

      The idea is that you can create your own lightbox content using the drag/drop page builder – so you can have any content you like in there. If you wanted to add the optimised video embed module in, with say a form next to it, then you can.

      (Actually, I did test with the optimised video embed module, and there is a bug where the video doesn’t stop playing after you close the modal, but it’s easy to fix).

      Check out the video, and if it’s something you might find useful, then let me know and perhaps spread the word. It’s not something I’m planning to charge for, but if I do release it then I need to spend a lot of time testing to keep bug reports to a minimum – so just need to be sure it’s something people would use 🙂

  2. Hi Doug,

    Thanks for this great little plugin.

    If I can make a suggestion on how the youtube/vimeo feature could be improved: Allowing for different aspect ratios. I have imported a vimeo video that I have in 2.39:1 aspect ratio. It plays without black borders in Vimeo but there are black bars along the top and bottom when it is imported with your plugin. (To be fair, I have yet to find a way to import it without those black bars).

    The reason I am so particular about this is that I also film weddings and I am working on creating a site that shows off my films. The black bars are horrible – I want it to just show the video in the aspect ratio it was shot in. Does that make sense?

    Is there anything you could do to enable that feature? Or can you point me in the direction of how to do it myself?

    Thanks.

    Phil

    • Hi Phil

      Thanks for your comment.

      Do you have a link to that video, so I can check the API response to see what’s available to use?

      Doug

          • Hi Phil – OK, I’ve actually put together a quick change to the plugin so you can adjust your own ratios. I need to just test the plugin a little before pushing it up to the WP.org repo, but you should see it there within an hour or 2, I guess.

            Just as an aside, when I tried a 2.39:1 ratio, there were black bars at the left and right edges. I calculated the ratio from Vimeo itself and it was 2.3529 (etc) : 1 – which when I used this on the video, it fit perfectly.

            Keep an eye out and please report back. If you’re able to, I’d appreciate some feedback on the plugin page too! 🙂

          • I can’t seem to reply to your comment, so have replied above… I just tested using the same video on a completely new site hosted elsewhere and the thumbnail is appearing fine.

            Edit: although I clicked reply above, it seems to have put the comment in the correct place!

  3. This if fantastic!! Thanks for all of your hard work on this. I never did like the server load when adding videos and maps.

    Two thoughts:
    1.Would love a color overlay or grayscale thumbnail with a hover option for branding/color schemes. Obviously the icon would layer on top of the color overlay. This would be an often used feature of mine for sure.
    2.Would it be possible to add the ability to load thumbnails for related videos from the same channel? Currently I am just adding a second column (20% width) and inserting the other three videos to the right. It works, but thought this idea would be very appealing.

    • Hello Mark!

      Thanks for the comment and suggestions!

      1. I think an overlay colour would be great… A grayscale thumbnail would require a CSS filter, which doesn’t have particularly good browser support yet, but I might consider adding it and leave it up to the person adding the module/video to decide on whether they should implement it.

      2. I don’t think YouTube make it possible to limit related videos from the same channel – they offer a binary option of switching related videos ‘on or off’ (using the rel=0 or rel=1 paramater) – so you’re probably doing the right thing.

      Thanks for stopping by 🙂

      Doug

      • Hi Mark

        I decided to play around with the plugin today, and made a few changes as per your suggestions. There’s just one small, slightly annoying bug that I’ve asked the Beaver Builder team to look into for me; it doesn’t affect the videos, but the live preview for the thumbnail overlay when you’re adding the module doesn’t work properly (and I’d rather not release this as an official update until that’s fixed). I’d be happy to send you a copy separately for you to upload yourself, however – just let me know.

        Doug

  4. Great plugin Doug! Thanks very many. Just one thing *turns around like Colombo*, when I use it on a mobile device I have to double click the image to get the video to play. Is there a way around this? I’ve tried shoving an “autoplay=1” thing in but that doesn’t seem to do it. Mind you I am about as computer savvy as my grandma so it’s probably just me.

    Keep up the good work!

    Elliot

  5. I would love to use this plugin but get the following error after install. I could no longer access my plugins admin page until I deleted the plugin folder off my server. If you get a fix for this, I’d still like to try it. Thanks.

    Parse error: syntax error, unexpected ‘[‘ in /home/content/73/10883073/html/lp/wp-content/plugins/wpd-bb-additions/classes/class-wpd-bb-additions-general-utils.php on line 57

  6. Oh wow, I have been struggling with Beaver Builder stripping out my embedded videos for days now. Thank you – your plugin has saved me.

Leave a Comment