Welcome to Help center

We are here to help

Video player

Follow

HTML:

        <div class="video-frame-wrapper">
            <img src="assets/img/your-placeholder.jpg"
                data-video="https://player.vimeo.com/video/71000070?autoplay=1"
                title="Play Video" id="video1" class="video__placeholder"/>
            <div id="video-controls" class="controls-wrapper">
                <button type="button" id="play-pause">
                <span class="button-helper"></span>Play
                <i class="fa fa-caret-right" aria-hidden="true"></i></button>
            </div>
        </div>
    

Js

        var video = document.getElementById("video1");
        var playButton = document.getElementById("play-pause");
        var buttonHoverBg = document.getElementById("video-button-hover-bg");
        $('.video__placeholder, #play-pause').on('click', function() {
            if ( !$('#video-player').length ) {
                var video = '<iframe id="video-player" src="' +
                    $('.video__placeholder').attr('data-video') +
                    '" frameborder="0" allowfullscreen wmode="opaque"
                    autoplay></iframe>';
                $("#video1").insertAfter( $('.video__placeholder') );
                $("#play-pause").style.display = 'none';
                $("#video-button-hover-bg").style.display = 'none';
            } else {
                $("#play-pause").style.display = 'block';
                $("#video-button-hover-bg").style.display = 'block';
                $('#video-player').remove();
            }
        });
Top
Powered by Zendesk