How to add a video background [Implemented]

complete

#1

Hi, Is it possible to add a video background to my landing page, and if so, how do I do that? I’ve tried a couple things in the editor, but can’t figure out how to get the video to be the full background.
Thanks!
Veronica


Is it possible to overlay text on a video embed in the background?
#2

Hi Veronica - Here’s a couple articles providing methods for video backgrounds that should work with Unbounce. Give one of them a try:

http://kesilconsulting.com/web-design…

http://www.labnol.org/internet/youtub…


#3

OK, I’m really not that techy, but I gave this a good shot (the first link…don’t like youtube) and after much playing around I nearly got there.

however, as you can only embed HTML within a page section, the video is not flush to the browser, and I kind of got stumped there.

If anyone tries this with success, please share!


#4

Hi Jonny,

Thanks for the details on how to do this. Your instructions work like a charm!

I’m A/B testing the video background design against my “old” landing page to see how it converts. I currently have 99% of my traffic running to the video background page. It’s here at http://www.totalcontrolaudio.com

Thanks,
Arthur


#5

Hey Arthur - Glad I could help! The page looks fantastic. Hope it converts just as well :slight_smile:


#6

Wow, thanks, works really well!


#7

Any help on using a hosted mp4? Can’t seem to get it full screen using above examples…
thanks in advance!


#8

Arthur - I haven’t run a video background A/B test myself so would be really keen to hear how things go!


#9

It works extremely well (over 50% conversion) as a targeted landing page with traffic directed from FB ads. For organize traffic, conversion is a low 5%.


#10

Hi Stephane - if you’re using a hosted mp4 and using tags to utilize the in-browser HTML5 video player, there isn’t a way to make it full screen, as the HTML5 video tag doesn’t yet allow it.

If it’s possible, I’d recommend uploading the video to YouTube or another hosted provider anyway though, as Internet Explorer 8 and lower doesn’t support HTML5 video, so it won’t play at all for any visitors using that version of IE or older.


#11

My only issue is after a youtube video is done playing it shows the tiled suggested videos after. any other format i could host myself instead of mp4 for html5 fullscreen video?


#12

Stephane, To remove related videos from the end of the video insert Òrel=0__ like this:


#13

Oops, didn’t mean to paste in the video. Here is what I meant:

iframe frameborder=“0” height=“100%” width="100%“
src=”//www.youtube.com/embed/QEskMs_32Ac?rel…


#14

Oops,

youtube.com/embed/QEskMs_32Ac?rel=0&autoplay=0&controls=0&showinfo=0&autohide=1&iv_load_policy=3


#15

That will solve the suggested video issue, for sure. Thanks, Arthur!


#16

Guys, how about a full width video only for a single page section? Similar to airbnb’s landing. Thanks


#17

Unbounce?


#18

Hey Nikita - Good question! I don’t have a solution in mind at the moment, but i’ll followup with you if I can find one. Perhaps another customer can chime in with a solution as well :slight_smile:


#19

That would be fantastic! The reason for we looking a solution here is that “video headers” like at airbnb.com has proven to improve conversion by 100-200% in some cases. We believe it is a must have hypotheses to try at unbounce, too!


#20

I don’t have a 100% solution, but you can get fairly close without much effort. Here’s an example http://www.totalcontrolaudio.com/airb… I created to see if it would work.