Grow your CSS skills. Land your dream job.

How paypal

  • # February 20, 2014 at 8:40 pm

    How does paypal do this? is this more of a HTML5 thing or jQuery or what? I am referring to the video background and how it goes from still to video each time the page loads. Thank

    https://www.paypal.com/

    Ed
    # February 21, 2014 at 1:59 pm

    It took me a while to work this out, but there’s no video on that page you linked to. There is however a video here: https://www.paypal.com/webapps/mpp/home

    I assume that’s what you wanted to show us.

    It displays an image of the first frame of the video whilst the video is hidden so it can load in the background, and then once it’s finished loading a JavaScript event is fired (presumably by the HTML5 Video API – you’ll have to Google it) that replaces the image with the video.

    The effect is seamless because the image is the first frame of the video. Slick.

    # February 21, 2014 at 2:03 pm

    Thanks! Is is it a JavaScript timer that delays the playing of the video

    # February 22, 2014 at 2:57 pm

    This is actually what is happening: http://stackoverflow.com/a/9755372/938664

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".