Posted on

WordPress Plugin: Video Backgrounds for SiteOrigin Page Builder

Screen Shot 2015-11-04 at 11.26.43 am

Today we’re releasing another WordPress background video plugin. This time it’s an add-on for the popular SiteOrigin Page Builder plugin.

The plugin allows you to set a background video on any Page Builder row, and gives options for adding an overlay (colour or pattern), a pause/play button, and some other minor settings.

Download the plugin here

53 thoughts on “WordPress Plugin: Video Backgrounds for SiteOrigin Page Builder

  1. I can’t get the video to show on my website.
    Could you provide better instructions?
    I’m mostly confused about the need for three URL addresses, and where the three files should be uploaded.

    1. Hi Kevin,

      Thanks for trying out the plugin :)

      You can upload the video files to your media library if they’re smaller than the upload size limit. If they’re too big, you can upload them via FTP to a folder on your server (E.g. wp-content/videos). Alternatively you could put the videos on a file hosting service like S3 or even better, a content delivery network like CloudFront (a content delivery network will result in the fastest streaming).

      The multiple URLs are necessary because different browsers supporting different video formats. If you can convert your video into MP4 and Webm formats then that’s ideal for cross-browser support. You can convert your file here – https://html5backgroundvideos.com/converter/

      Let me know if you’ve got any more questions :)

  2. Hi ,

    I am very thankful to having your plugin video background for siteorigin. In fact, i already run the plugins but there is a little thing i ask for a favor.

    When i run the video , the video from the background works ok except the text or word that faded about a second. This text or word is done using Visual Editor Widgets.

    Kindly spare time to take a look of what i had missed.

    Thank you and looking forward to hear from you soon.

    Best Regards,
    Leo Reyes

    1. Hi Leo, do you have a URL where I can go to view and debug this for you?

      1. Hi Angus,

        May I please thank you for your help to fix our concern on background video.

        Thank you and best regards,
        Leo Reyes

  3. What would be the easiest way to disable autoplay and enable audio by default?

    1. Hi Dave,

      The plugin doesn’t have those options built in, however if you’re happy to hack the plugin a little bit it will be pretty easy for you to achieve.

      If you go to the plugin folder and edit ‘background-videos-for-siteorigin.php’, around line 97 you’ll find the autoplay and muted options, one per line. You can safely delete these lines and your videos will no longer autoplay or have audio disabled.

      Note that if you update the plugin later, this will be undone.

      Thanks!
      Angus

      1. Hi Angus,

        Thanks for the reply. I found those lines earlier. When I deleted the “muted” line it worked, however when I deleted the autoplay line it had no effect. Perhaps I will try deleting the line again and then clearing my browsers cache and rebooting everything.

        1. Hi Dave,

          Sorry, a little further down you’ll find this line:

          video_tag.play();

          Delete that line too.

          You’ll also find that the pause/play button still starts as a pause icon, you can change that in assets/jquery.background-video.js. Just change line 54 from:

          var $pauseplay = $('<button class="jquery-background-video-pauseplay pause"><span>Pause</span></button>');

          to:

          var $pauseplay = $('<button class="jquery-background-video-pauseplay play"><span>Play</span></button>');

          Let me know if you have any further issues.

          Cheers,
          Angus

          1. Hi Angus,

            Unfortunately when I have the video_tag.play(); removed from line 140, the entire video row disappears and all I get is white space.

            If I put the autoplay line back in on line 97 it functions like before and starts the automatic play. With both deleted I get nothing.

        2. Hi Dave,

          Replying to this comment due to maximum comment depth.

          Have you got a fallback image set? I imagine that the video is ‘disappearing’ because of the fade-in setting, which fades the video in over the top of the fallback image.

  4. Hi!
    Thanks for a nice video plugin. I wonder two things.
    1. When the video i starting it always show the background image, before start playing video. I have tried with different video quality, but same thing. What can I do?
    2. The video reshapes before start playing. I use full width page on my home page. Is it possible the video can be ready for that format directly from start?

    Best reagards, Fredrik (Sweden)

    1. Hi Fredrik,

      1. You can override this by adding the following line of CSS somewhere (your theme probably has a custom CSS input).

      .jquery-background-video { opacity: 1 !important; }

      2. This shouldn’t happen. Do you have a link to your site that I can have a look at? It could be your theme’s CSS interfering with the plugin.

      Thanks,
      Angus

  5. Hello ,
    Thanks for a nice video plugin.
    I have the following problem. Once I get the background video on my site works very well, but after 3-4 days disappears. Can you help me fix the problem.
    Regards,
    Deso

    1. Hi Deso,

      Where are you hosting the video files? Have you uploaded them to your server?

      Best Regards,
      Angus

  6. Hello I upload video on my media library .

    1. Hi Deso, do you have a url where I can have a look at your site and try to help you fix this problem?

      Thanks,
      Angus

        1. Hi Deso,

          The video appears to be working. Is it still not working for you? What browser are you using to view?

          Thanks,
          Angus

  7. Hi Angus,
    Video now is working because I upload again url address. But after 2-3 days background video disappears.
    I use google chrome.

    1. Hi Deso,

      This doesn’t sound like an issue with the plugin – it doesn’t do anything at all with the file system or media library, it just looks for the video at the URL you enter.

      Just to be clear, is the video file being deleted from where you upload it? Or is the url you pasted into Visual Composer disappearing and you have to paste it back in again?

      If it’s the video file being deleted from the media library you’ll probably have to troubleshoot that issue separately as it definitely couldn’t be the plugin causing that.

      Best Regards,
      Angus

      1. Hello Angus,
        Now Video work perfect. But why when I open website from my Iphone I can not see video?

        1. Hi deso,

          Background videos are disabled on iPhone because iOS does not autoplay, and instead adds the big ‘play’ icon on top of the video, which is rarely the behavior you want from a background video.

          Thanks,
          Angus

  8. And Android also not be seen obviously some settings I need to do on site

  9. Hi there,

    I’m using your plugin on a web page, but it is only displaying a “thin slice” of the video and doesn’t display across the full page.

    Appreciate any help!

    Thank you,
    Bill

    1. Hi Bill,

      The width and height of the container are dictated by the built-in page builder options, or by the content of the row if no height is explicitly set. You can update these things in the row options.

      Cheers,
      Angus

      1. That got me going. Thank you, Angus!

        Bill

  10. I have done all the appropriate things and the video is not showing up. I have the video downloaded to my media library, it is way below the size limit, and in proper .mp4 format. I am trying to use the plug in to revamp my current site so I am using a local host, but when I attempt to view the page it just shows with my header and footer, no content

    1. Hi David, it sounds like you probably just need to set a height on your row.

      1. I originally set my height to 500px just to play around with it and dial it in and still no video. Thank you for the quick response though

        1. How would you word the .mp4 url for a video saved in library? That may be the problem

          1. If it’s in the media library you should be able to copy the url from the url field.

            Are you developing with WP_DEBUG set to true? If not, you should update that in your wp-config.php and check if there are any php errors on the page.

  11. Yes, I am and not receiving any errors. I appreciate your quick response but I think due to the difficulty of this at this time I’m just going to go with a new builder and set of plug ins. Thank you

  12. Hey, this plugin was great, exactly what i was looking for.
    I have a small problem however, there seems to be some kind of problem with the z-index of the background as it plays “above” the picture i want to have in front of it, I can see how the image still is there for less than a second. The image i am using in front of it is a Site Origin Image with pretty standard settings. Hope to get an answer from you soon!

    1. Hi Sam, is there a URL that I can view your site on? It sounds like you just need to add position: relative; to the outer-most container of your image.

  13. Hi,
    Your plugin is really great but video does not load on mobile phones (I checked on iPhone and Nokia Lumia). Could you tell me what to do?

    http://intercedo.stronazen.pl/kwiatkowski/

    Appreciate any help

    Thank you,
    Daniel

    1. it is outdated already. I guess after disable WP Cache it loads video

    2. Yes I am sure after enable WP Super Cache video does not load on mobile phones. Could you check this?

      Thank you

      1. Hi Daniel,

        The plugin doesn’t load the video on iPhones because iOS does not allow autoplaying of video – it puts the big play icon over it and launches the media player when you click it. Not the desired behaviour for a background video, so we just show the image instead.

        1. Hi Angus,
          yes noticed that but what you say about that iOS 10 allows to use autoplay ?
          https://webkit.org/blog/6784/new-video-policies-for-ios/

          1. Eventually we will update the plugin to support video playback on iOS 10. Unfortunately the plugin is not our primary focus at the moment.

            If you want to try to add support yourself, here’s how you could do it.

            In the plugin javascript file, change this line

            var iOS = /iPad|iPhone|iPod/.test(navigator.platform) || /iPad|iPhone|iPod/.test(navigator.userAgent);

            to

            var iOS = false;

            Then in the main PHP file, find the video tag attributes and add playsinline (just insert it as a new line between autoplay and muted).

            I think that should be all you need but I haven’t tested it. Let me know if it doesn’t work.

  14. and even if I disable WP Super Cache video does not load on iPhone.

    1. Hi Angus,
      referring to:
      ———————-
      Eventually we will update the plugin to support video playback on iOS 10. Unfortunately the plugin is not our primary focus at the moment.
      If you want to try to add support yourself, here’s how you could do it.
      In the plugin javascript file, change this line
      var iOS = /iPad|iPhone|iPod/.test(navigator.platform) || /iPad|iPhone|iPod/.test(navigator.userAgent);
      to
      var iOS = false;
      Then in the main PHP file, find the video tag attributes and add playsinline (just insert it as a new line between autoplay and muted).
      I think that should be all you need but I haven’t tested it. Let me know if it doesn’t work.
      ————————

      It doesn’t work

  15. Hi there, thanks for the great plugin. Just thought I’d ask for help since I’m facing a problem that was reported in this comment thread in January 2016 as well:

    “The video reshapes before start playing. I use full width page on my home page. Is it possible the video can be ready for that format directly from start?”

    To give a slightly more detailed description, I’m using Firefox and have used the video background plugin on a full-width row on the page. However, when the page first loads, there are times where the video starts playing in a narrower container (the size of which is the “standard” width for the theme) for a few seconds before suddenly snapping to the full width. Before it snaps to full-width, I can also see the fallback image behind the video. Any idea what causes this problem or how I could go about fixing it? (I know “some” web dev so if you could even point me to the correct part it’d help a lot).

    Thanks.

    1. Hi Kang-An, is there a link I could check out to see if I can help?

      Thanks,
      Angus

      1. http://www.actuallysanestudios.com/

        Unfortunately the problem doesn’t always appear. And i have no idea how to recreate it. Just sometimes when I’m loading the page it’ll have to resize itself. Also, I’m currently working on the site as I type this comment so stuff might look wonky while you’re accessing it. But whatever I’m doing doesn’t affect the video background and I’ve been facing that problem ever since I started development.

      2. Hi Angus I figured out how to recreate the bug. If you zoom out the page (e.g. ctrl + -) , you’ll see the video shrink in size for a few seconds before it snaps back to the new full width again. That effect happens to me sometimes when I first load the page.

        1. Hi Kang-An, I can’t replicate your issue on Firefox on my Mac. Are you on a PC? What Firefox version?

          1. PC, FF 49.0.1. This problem also occurs on Chrome (Version 53.0.2785.143 m (64-bit)).

            I’ve recorded a video of it in Firefox: https://streamable.com/5e7g

            I’m zooming out the whole page to 80% and you can see the borders along the side of the video that stay there for a few seconds before the video snaps back to the full width. This effect is sometimes present upon page load and not just upon resizing the page.

          2. Hi Angus another video where I managed to capture the bug on page load.

            https://streamable.com/7u8l

          3. Hi Angus, after more testing, I’ve discovered that the player resizes itself to the full width of the page at the exact same time that the video restarts. (Resizing probably occurs on the timeupdate event) Is there anyway to ensure that it’s always resized first before the video starts playing the very first time? I think there might be some conflict with my theme’s js/css… Any thoughts on what I should look out for?

          4. Sorry for the spam but I’ve realised that this is happening because styling.js (from the siteorigin pagebuilder plugin) is running AFTER the fitvideo function is run. Styling.js is responsible for stretching the background of rows to be full width.

            Thus, what happens is:

            1. page loads, fitvideo function runs and fits video to standard width size
            2. styling.js runs and stretches background to full width. Video continues playing in standard size
            3. when the video loops (i.e. restarts) fitvideo function runs again and this time stretches the video to full width.

            Has nobody else had this problem when trying to play a video background on a full width row?

Leave a Reply

Your email address will not be published. Required fields are marked *