[How to] Add A Sticky Video Widget

widget
add-on

#1

community tips scripts banner

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! :gift: :gift_heart: :santa:

Introducing the Sticky Video Widget :arrow_forward::rocket:

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

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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 the ‘fixed_vid.css’ CSS in your Stylesheets

  4. Replace #lp-pom-button-16 with your ‘close’ button ID

  5. Copy and paste the ‘fixed_vid.js’ script into your Javascript tab

  6. Replace the “video” and “button” values with their respective ID’s

  7. (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. :rocket:


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


The Ultimate List of Unbounce Tips, Scripts & Hacks
How Do You Improve the Video Play Rate on Landing Pages?
The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

Nice one @Noah!!


#3

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


#7

Coooooooool

Matthew A. Haas ~ Syndicate Strategies


#8

Thanks @Jess + @Justin!


#9

This is so slick. Awesome one @Noah


#10

Thanks Johnny :smiley:


#11

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


#12

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!


#13

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! :slight_smile:


#14

Thanks Jess! the extra explanation and pic did the trick :slight_smile:


#16

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?


#17

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/


#18

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!


#19

Worked like a charm! Cheers!


#21

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


#22

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!


#23

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.


#24

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!