Type a keyword and hit enter to start searching. Press Esc to cancel.
VP of Creative Services | Austin, TX

Currently Reading

How to Add Video Background to Squarespace’s Mercer Theme

video-header-mercer-squarespace-how-to

Banner videos, video headers, and video backgrounds are incredibly popular right now! Not only do they give us a fantastically easy way to capture the attention of our audience and draw them into our content — they just look good! Unbounce boasted an incredible video landing page variant for their 2016 Call To Action Conference, and the internet has never looked better!

Another contender in the internet popularity race is Squarespace. Squarespace, an amazing launchpad for web beginners and entrepreneurs, is notorious for not being as flexible or as robust as WordPress. Often, users take to Google to find complex answers to popular solutions that should be implemented at the click of a button.

Today, we’re going to focus on how to add banner videos to Mercer. Enjoy!

How to Add Video Background to Squarespace’s Mercer Theme

  1. Add this javascript code to Settings > Advanced > Code Injection > Header:
     

    1
    2
    3
    
    <squarespace:script src=“plugin.js” combo=true/>
    <squarespace:script src=“site.js” combo=true/>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

     

  2. Add this script code to Pages > The Cog Next To your Home Page > Advanced > Page Header Code Injection:
     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    
    <script type="text/javascript">
          $(window).bind("load", function() {
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            } else {
              var banner = $('.tweak-overlay-parallax-enabled .Parallax-item img').first();
              if (banner.length === 0)
                banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
              if (banner.length === 0)
                banner = $('#parallax-images img').first();
              if (banner.length === 0)
                banner = $('.has-main-image img').first();
              if (banner.length === 0)
                  banner = $('#page-thumb img').first();
              var url = "http://jason-sherman-jme6.squarespace.com/s/Rising_Tide_Homepage_Video_full_size.mp4";
              banner.hide();
              $('<video muted class="bannerVideo" autoplay="" loop="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
              adjustBanner($('.bannerVideo'), banner);
              setTimeout(function() {
                adjustBanner($('.bannerVideo'), banner);
              }, 2000);
              $(window, banner).resize(function() {
                adjustBanner($('.bannerVideo'), banner);
                setTimeout(function() {
                  adjustBanner($('.bannerVideo'), banner);
                }, 200);
              });
            }
            function adjustBanner (video, banner) {
              video.css({
                height: banner.css('height'),
                width: banner.css('width'),
                top: '320px',
                left: banner.css('left'),
                position: 'relative',
                'object-fit': 'contain'
              });
            }
          });
        </script>

     

  3. Adjust the height of your header box to fit your video using standard CSS to edit this section of the code from step 2:
     

     

Note: If you’re using  Hayden, Anya, Bryant, Pacific, and Fulton, please refer to Mono Space’s fix.

14 comments on “How to Add Video Background to Squarespace’s Mercer Theme”

  • Justin

    i added a .mp4 file to square space by making a text into a hyperlink. Is there any settings in the page that I should be adding as well to get this to work?

    • Kiza McDonald (author)

      Hi Justin!

      Sorry to hear that you’re experiencing trouble! Great work making the link into a hyperlink on Squarespace; that can be tricky for some people. Here’s a checklist for you to follow! Let me know if you’re still having trouble after you’ve checked everything:

      – Verify that you’re using the Mercer theme (This only works for Mercer.)
      – Take a look at your video URL. If it contains “https” change it to “http”
      – Be sure that you have a background image in place for the banner; even though you won’t be using the image, the banner only displays if there is an image for the video to replace. (I recommend using the first still from the video for a flawless transition.)

      Good luck!
      – Kiza M.

  • Elli Gotlieb

    Hi Kiza!

    Thank you so much for this- it was so helpful! This is probably very obvious but I was able to follow the steps, get the banner into place but now I am unsure where/how to add my own video. The one playing is the one you had for this demo. Can you help? Thank you SO much!

    • Kiza McDonald (author)

      Hi Elli!

      I’m so glad that I was able to help you! Great job on getting it working! Swapping out the video is just as easy. :)

      – Erase the URL that exists in line 14: var url = “http://jason-sherman-jme6.squarespace.com/s/Rising_Tide_Homepage_Video_full_size.mp4”;
      – Paste your .MP4 video URL. Be sure that it leads with http, not https.

      Let me know if you need anymore help!
      – Kiza M.

      • Sabine

        Hi Kizia,
        Thanks a bunch from Germany! I am only able to copy and paste (old school graphic designer) but it now works perfectly on the mercer page (trial) for a client! but -without any sound… ;-( do you have an idea – ?
        thank you so much!
        Sabine

        • Kiza McDonald (author)

          Hi Sabine!

          I had that issue at first. The solution was being sure that the URL starts with http, not https. Let me know if that helps!

          – Kiza McDonald

  • Fiona Sloan

    Thank you so much for this! Huge help. What was the change made from this and the Muno one? I’d been pulling my hair out until I found this!

    • Kiza McDonald (author)

      You’re so welcome, Fiona!

      I was doing the same thing before I noticed that most of the issues were in some of the syntax, selector names, and order of events were different between the two!

      I hope you still have some hair left! ;)

      – Kiza McDonald

  • Ira Lossman

    Video backgrounds are becoming more popular, so in this article we ll show you how to add your own video as an eye-catching header background to our themes.

  • Paja

    Hi Kiza

    thanks for all the great info..I have these running on a couple sites..wondering what the status of this working on mobile devices? does it work now? or will it in the future?

    thanks

    • Kiza McDonald (author)

      Hi Paja!

      You’re so welcome! I’m glad to hear that you have it working! For mobile devices, it depends on the device, itself. Most phones just aren’t equipped with the technology to play native video. In this instance, it’s best to make your starting header image (the one that the video code overrides for this to work) a still that works well with your web design!

      You’re welcome,
      Kiza McDonald

  • Paja

    thanks Kiza for your response..

    yes that’s how I have it set up now. bummer it can’t look as dynamic on my iPhone and iPad. I was wondering if you could look at my site’s front page…I noticed that on my 30 inch monitor the video of the stars doesn’t stretch to mask the entire browser.. is that something I could fix? the front page in question is http://www.sweatyfish.net

    thanks again for all your great info

    Paja

    • Kiza McDonald (author)

      Hi Paja!

      I know; you could try using a GIF as the background image. I haven’t tried that solution, but it might work! That wouldn’t account for your sound, however.

      To make the video fit the larger sizes, you can try updating the height and width of the code to 100% OR doing custom CSS to target just that video’s box and change the height and width to 100%. Try adding this to your CSS:
      .bannerVideo {width: 100% !important;}

      I haven’t tested this, so let me know how it goes!

      – Kiza M.

  • Paja

    great will do! yes I have another site that I made with GIF files..actually works pretty good !

    check it out http://www.cheshiresband.com

    thanks again..

    I will mess with the size on my other site

    Paja

Leave a Reply

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