[How to] Add A Sticky Video Widget

  • 7 December 2016
  • 22 replies
  • 190 views

Userlevel 7
  • Former Unbouncer
  • 126 replies

When it comes to relaying a message quickly and effectively to your audience, video is king.

This isn’t news to anyone, but what happens when you want to implement a video on your landing page and your users scroll away and miss all the best parts? Or perhaps you have an instructional video that your viewers need to follow as they scroll through your page.

Well, here’s an early holiday gift from Unbounce! 🎁 💝 🎅

Introducing the Sticky Video Widget ▶️ 🚀

Now you can implement video on your landing page that will follow your user as they scroll through your content, Here’s Sticky Video Widget in action!

Want to add this to your campaign? Below are some simple step-by-step instructions to include this juicy widget in your Unbounce landing page.


How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


First, go grab this script:
https://gist.github.com/noahub/65ac6f11b3e91c8d92b3445157d5975f

Instructions:

  1. Add a video element to your landing page

  2. Add a ‘close’ button element for your video

  3. Copy and paste this CSS into your Stylesheets:

<style>
  /* Replace with your 'close' button ID */
  #lp-pom-button-16 {
    display:none;
  }
  
  .lp-pom-video{
    transition:all 0.4s linear;
  }
.smallVid {
    left: 0 !important;
    top: 0 !important;
  	z-index: 999 !important;
    ms-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-transform-origin-x: 0;
    -webkit-transform-origin-y: 0;
    transform-origin:0 0;
    position: fixed !important;
    display: block !important;
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3);
  }
  .vidAdjust{
  	margin-top: 1%;
    margin-left: 1%;
  }   
</style>
  1. Replace #lp-pom-button-16 with your ‘close’ button ID

  2. Copy and paste this script into your Javascript tab:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
  //Replace with your video's ID
  var video = "#lp-pom-video-13";
  //Replace with your 'close' button ID
  var button = "#lp-pom-button-16";
  //Optional: adjust in pixels when the video transitions
  var showHeight = 400;
  
  var targetClass = "smallVid";
  var adjustClass = "vidAdjust";
  var classSelect = ".smallVid";
  var noClose = true;
  var initWidth = $(video).width();
  var initHeight = $(video).height();
  $(window).scroll( function() {
  if ($(this).scrollTop() > showHeight && noClose) {
    $(video).addClass(targetClass + " " + adjustClass);
    $(button).addClass(targetClass);
  } else {
    $(video).removeClass(targetClass, adjustClass);
    $(button).removeClass(targetClass);
  }
});
  $(button).click(function(){
    $(video).removeClass("smallVid vidAdjust");
    $(button).removeClass("smallVid");
    targetClass - null;
    adjustClass - null;
    noClose = false;
  });
</script>
  1. Replace the “video” and “button” values with their respective ID’s

  2. (Optional) Set the “showHeight” value in pixels to adjust when the on-scroll transition happens


Testing:

Now let’s test this puppy out! Like any other feature that you implement onto your page, you’ll want to see what effect it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page, just to be safe. Documentation on A/B testing can be found here.

Conclusion:

As mentioned, video is an extremely effective way to increase traffic, and generate, nurture and convert leads. Here’s some tips from Wistia to help boost your video marketing!

Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below!


Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


22 replies

Userlevel 7
Badge +1

Nice one @Noah!!

Whoa! Really can’t wait to see how people use this one. Awesome job @Noah! 👊

Coooooooool

Matthew A. Haas ~ Syndicate Strategies

Userlevel 7

Thanks @Jess + @Justin!

Userlevel 3

This is so slick. Awesome one @Noah

Userlevel 7

Thanks Johnny 😃

We seriously have the best community! What I would give for an Unbounce CMS and email designer haha

Hi there,

I’m a newbie, apologies in advance for the newbie question, but in step 2–add “close” button element. Is that literally adding it from the options of the left-hand toolbar and dragging it over or is this an additional feature that can be configured from the right-hand side with the properties from the video itself? thank you!

Userlevel 7
Badge +1

Hey Daniela!

@Noah’s on vacation at the moment (lucky bugger) but I think I can help with this. There is no actual “close button” in the side panel. You’d be dragging a regular button onto the page and then styling it to behave as a close button.

In the example that Noah used, he put the letter “X” in the button label text to make it appear as a close button, shown in this screenshot below:

Feel free to chime in if you hit any other snags along the way, happy to help! 🙂

Thanks Jess! the extra explanation and pic did the trick 🙂

Hi, love this! However, the “button” doesn’t close the video. I followed the steps, replaced the specific ID:s but no go. Anything missing in the scripts? Has this worked “out of the box” for everyone else?

Hi,

Thanks so much for the tip. I have it worked 99%. Just had a quick question about positioning. I need it to be a few pixels lower to accommodate for the sticky header as currently its overlapping with that in the top left corner. What do I need to add/adjust in order to have the video float just a bit lower on the screen? LP: http://unbouncepages.com/test-bus-new-may-19/

Userlevel 7

Hey @Zach_Moss, changing the top value of the .smallVid class should do the trick in your CSS. Something like top: 60px !important; should do the trick!

Worked like a charm! Cheers!

Would this work if I embed a video as HTML rather than add a video through the Unbounce video element?

Userlevel 7

hey @yoav, I think you should be able to get this working by first changing the CSS selector class .lp-pom-video to .lp-code on line 7 of the fixed_vid.css CSS snippet. Then use the ID of your HTML widget for the video variable in the fixed_vid.js code snippet. Good luck!

Hi there looks great, Question is it also possible to add a sticky video only if you play the movie.?
Now http://landingpage.noahmatsell.ca/video-scroll/ show the sticky video without playing the video.

Hi there. I’m trying to follow the instructions here to implement this but it’s not working for me. I’m not sure what I’m missing. Could you please take a look? https://ppc.cesisolutions.org/washington-debt-consolidation/d.html

Thanks so much!

Is there any way to add a line that would stop playing the video when someone hits the ‘Close’ button?

Currently, the video window closes but the video still plays in the original window…

Hey Noah & gang,

I’ve recently started using Unbounce to create our landing pages and had a marketing strategist suggest to create a video as a sticky widget as opposed to our current lightbox.

I’ve followed these instructions & everything is ‘working’ but having some issues with the functionality of the transition on desktop.

When scrolling past the trigger point the embedded video continues to play & the widget just shows the thumbnail. The strange thing is that this only happens on desktop, our mobile version functions perfectly.

I did have autoplay enabled & Unbounce advised to turn this off, but this hasn’t fixed the issue.

Any advice or suggestions would be greatly appreciated. Link to the page is below to see exactly what’s happening.

https://discover.areyouunstoppable.com/mission/

Thanks

Badge

Thank you so much for the solution. It worked very well.

Thanks Jess for the helping us. You have solved my problem!!

Reply