Adding iframe video through jQuery

// 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');
	} );
}

Search the site

Newsletter

Subscribe to get regular news and updates

  • This field is for validation purposes and should be left unchanged.