mistkaes mistkaes - 4 months ago 36
jQuery Question

Make YouTube video time change with jQuery UI-Slider

So, I've got the basics... but I'm trying to do the opposite of what my current code is trying to do. At the moment, when you move the YOUTUBE UI SLIDER it'll change the time of the custom UI SLIDER, I'm trying to have it be the other way around where, when you change the UI SLIDER it'll change the YOUTUBE UI SLIDER.



range: "min",

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'YqeW9_5kURI',
events: {
'onReady': onPlayerReady,

setInterval(function() {
$("#content").text("video_time: " + player.getCurrentTime());

$("#range").slider("value", player.getCurrentTime());
$("#range").slider("option", "max", player.getDuration());
}, 100);

function onPlayerReady(event) {


From jQuery slider API , to get the current slider value on sliding use the following (for example ):

$( ".selector" ).slider({
  slide: function( event, ui ) {console.log(ui.value)}

Once you have the ui.value , pass it to youtube player api


so whole code will be :

  range: "min",

 slide: function( event, ui ) {player.seekTo(ui.value);}