Scribd Logo
Upload

Welcome to Scribd!

  • Add Button To ClickFunnels

    Uploaded by

    Ip Singh
    5 views2 pages
    This document contains code to embed a Vimeo video player on a webpage and control it using JavaScript. The header and footer code embeds the Vimeo player and defines a click handler to play, unmute, and reset the video. CSS is included to display a "sound on" image that pulses in size over the video, and hides it after clicking to play.

    Original Description:

    dic

    Original Title

    Copy of Add Button to ClickFunnels

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code to embed a Vimeo video player on a webpage and control it using JavaScript. The header and footer code embeds the Vimeo player and defines a click handler to play, unmute, and reset the video. CSS is included to display a "sound on" image that pulses in size over the video, and hides it after clicking to play.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views2 pages

    Add Button To ClickFunnels

    Uploaded by

    Ip Singh
    This document contains code to embed a Vimeo video player on a webpage and control it using JavaScript. The header and footer code embeds the Vimeo player and defines a click handler to play, unmute, and reset the video. CSS is included to display a "sound on" image that pulses in size over the video, and hides it after clicking to play.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Header Code:

    <script src="https://player.vimeo.com/api/player.js"></script>

    Footer Code:
    <script>
    $(".elVideo").click(function() {
    var videoElement = document.getElementsByClassName('elVideo')[0];
    var videoiFrame = videoElement.querySelector('iframe');
    var player = new Vimeo.Player(videoiFrame);
    player.setMuted(false);
    player.setCurrentTime(0);
    player.play();
    this.classList.add('removedSoundOn');
    });
    </script>

    CSS:
    .elVideo .fluid-width-video-wrapper:before {
    content: ' ';
    position: absolute;
    left: 20px;
    top: 20px;
    width: 200px;
    height: 80px;
    z-index: 5;
    background: url('https://images.clickfunnels.com/a7/585321508e4ff69a859ae51bb333b6/
    sound_on.jpg') no-repeat center;
    background-size: contain;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: grow;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    transition-property: -moz-transform;
    transition-duration: 1s;
    animation-name: grow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    }

    .removedSoundOn .fluid-width-video-wrapper:before {
    display: none;
    }

    @-webkit-keyframes grow {
    from {
    -webkit-transform:scale(1);
    }
    to {
    -webkit-transform:scale(1.1);
    }
    }
    @-moz-keyframes grow {
    from {
    -moz-transform:scale(1);
    }
    to {
    -moz-transform:scale(1.1);
    }
    }
    @keyframes grow {
    from {
    transform:scale(1);
    }
    to {
    transform:scale(1.1);
    }
    }

    Image URL:
    https://images.clickfunnels.com/a7/585321508e4ff69a859ae51bb333b6/sound_on.jpg

    You might also like