Fade out youtube video

K

Is there a way to make a youtube video on a  landing page similar the one on the page below?

I have a landing page currently set up with the regular video, but I was trying to make it more engaging…

https://www.ted.com/talks/bill_gross_the_single_biggest_reason_why_startups_succeed

Thanks!

6 replies

Amit_Zala

Hey Katy,

Just a few days ago I was reading this post

/topics/how-can-i-create-a-youtube-video-background?_ga=1.189…

I would assume that if you can create a video background in Unbounce - then surely you could do what you’re asking ? Your answers might be in the comments ?

J

Hey Katy! 

That TED video page is really beautiful, but it looks like it was custom coded to the moon and back for that kind of functionality. I’m not entirely sure if it would be possible to recreate in Unbounce, but the good news is that your video can be super engaging _without _needing the fancy fade. Take a look at the links below for some tips to ensure your videos are helping (and not hindering) your conversion goals: 

The Psychology of Landing Page Videos (+5 Video Optimization Tips)
Don’t Bother Using Video on Your Landing Page Unless You’re Doing These 5 Things
10 Landing Pages that are Crushing it with Video

K

Thanks! Instead of the fade out, is there a way to use fancy box javascript instead? I used the code I had for images, but it doesn’t work. See below.

Phillip

Would you like something like this:

http://codepen.io/philbar/full/LVygEE/

K

Yes! How would I be able to do that? 

Phillip

I used a slightly modified version of Magnific Popup.

This has all the code to run the example.

Some notes:

  • The CSS is straight from Magnific Popup
  • The javascript is slightly modified to hide player controls. At the bottom is where you declare which link you are applying the effect to (in my case it’s " #lp-pom-image-205 a" )
  • You need jQuery 1.7.2 or better (Unbounce has a really old version so you can’t check the box for that)
  • I also added some functionality to close the popup when the video is done. You need to include the Youtube API javascript. (src="\www.youtube.com/iframe_api")

Reply


Terms & ConditionsCookie settings