Video Squeeze Page Help

by 7 replies
9
Hi,

I have a client who wants a simple video squeeze page template designed.

On there he wants the video to be locked until the client complete form below.

How can I code this?

He wants a pop up message appear when the viewer click on play button on video saying something like "complete form below to see video"

then once they complete the video will start playing.

Any help is much appreciated.

Kursat
#programming #page #squeeze #video
  • I would create just use an image of the video with a java "onclick" over it on the landing page, so when a visitor clicks on the image of the video the popup will come up showing them to fill out their email. Then I would have the email submit redirect to the actual video page.
    • [ 1 ] Thanks
  • Thanks for your reply.

    But what I need to do for displaying the video on the same page? where the image of the video is...

    Kursat
    • [1] reply
    • You would need to use a website video player, such as Flowplayer, JW Player, jPlayer, etc.

      Then what I would do is layer a transparent div on top of the video player. Then use a jQuery click event on the transparent div that shows a popup that says "Please fill out the form below, blah blah blah...".

      Then when the form is filled out and submitted, use jQuery to remove the transparent div (you could set the CSS "display" to "none"), and then (optionally) begin playback of the video. How to trigger playback of the video via Javascript/jQuery will depend on what video player you use... you'll have to search through the video player's API to find out how.
      • [ 1 ] Thanks
  • what I mean is that when they click on the submit button.

    The image will be replaced by the video and it will be available for the viewer to see...
  • We can design and coding Video squeeze Page as per your requirements.

    Please mail me: info@pixelnav.com
  • I'm looking for a simple solution that looks nice and has a feature to play automatically, preferably a solution that doesn't require a lot of money or me pulling out all my hair. I'm not sure I'm going to find such a solution but anyways "Wistia" I do believe has a feature that describes what you are looking for. It's a bit pricey but not the priciest either that I have seen, depending at how you look at it though I guess, you save if you aren't doing as many videos.

    PS

    If anyone could help me with my issue in any way I would be really grateful thanks.
  • I think I would just use an iframe to show the image of the video, which would have an onclick show alert message that says to fill out the form with name and email address. Then on submit the actual video would replace the image of the video in the iframe.

    With this solution, you would also have the form in the iframe at the bottom so when the submit button is clicked the form would go away and the video would replace the video image and start playing.

    This would be a much cleaner solution by making the form go away and not have to worry about whether the users browser would handle some of the other solutions.

    This is a solution that you could probably do yourself. I have an example of just about the same thing but it is an opt-in form on a sales letter.

    The problem was to add an opt-in form as part of the sales presentation but when the form was filled and submitted, I did not want the visitor to leave the sales letter.

    I have an example at...

    Business Blogger's Manual

    If you scroll down the sales letter you will see the opt-in form in the middle of the sales copy. The form is actually in an iframe. Here is the code I use for the iframe...

    <code><iframe src="http://bestwaytostart.com/iframeform_2.html" width=375 height=275 marginheight=0 marginwidth=0 frameborder=0 scrolling="No" name="I1"></iframe></code>

    ...the url would be to a page with the video image and opt-in form which should be right below the video image so it will appear in the iframe.

    Use javascript to activate the alert box that tells them the fill out the form.

    In my example when the form is submitted a message appears in place of the form that tell the visitor that the product is being delivered to their email inbox and will arrive in 5 or 10 minutes. So they should continue what they were doing, which is reading my sales letter.

    Instead of the message like I had you have a page with the video. You just have the redirect in your autoresponder redirect to that page with the video. When the form is submitted the video image and opt-in form will be replaced in the same iframe by the real video.

    You will have to play with the iframe size in the code I provided to get the video image and opt-in form to fit in the iframe. Make the video image the same size as the video because even though the iframe will be bigger than what is needed for the real video, as long as you use the same background color for all the pages it will look just like the image started to play if you have auto start set for the video.

    Make sure that the content on the pages that will show in the iframe are align to the top left of their pages to appear properly and completely in the iframe.

    I hope this has been helpful,
    Steve Yakim
Join the discussion

Next Topics on Trending Feed