// prepend video to container if ($(window).width() > 1024) { $('.video-wrapper').prepend( '<div class="iframe-container"><video id="#video1" autoplay="true" playsinline="" muted="" loop="" src="https://url.com/video/video.mp4"></video></div>'); } // load vimeo player and add control buttons if ($(window).width() > 1024) { $('.vimeo-wrapper').append( '<iframe id="player1" src="https://player.vimeo.com/video/123456?background=1&muted=1&autoplay=1&dnt=1&loop=1&byline=0&title=0" title="Video title" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><div class="vimeo-buttons"><button class="play"><span class="screen-reader-text">Play</span></button><button class="active pause"><span class="screen-reader-text">Pause</span></button></div>'); $('.vimeo-wrapper iframe').attr('aria-hidden', 'true'); } if ($("#player1").length) { var iframe = $('#player1')[0]; var player = $f(iframe); // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent('ready', function() { player.addEvent('pause', onPause); player.addEvent('playProgress', onPlayProgress); }); // Call the API when a button is pressed $('button.play').bind('click', function() { player.api($(this).text().toLowerCase()); }); $('button.pause').bind('click', function() { player.api($(this).text().toLowerCase()); }); // Vimeo play toggle. $( '.vimeo-buttons .play' ).click( function() { $(this).removeClass('active'); $('.vimeo-buttons .pause').addClass('active'); } ); $( '.vimeo-buttons .pause' ).click(function( ) { $(this).removeClass('active'); $('.vimeo-buttons .play').addClass('active'); } ); }