jQuery.tubular not accepting input

Question

I am currently using jQuery.tubular (Here) to display a YT video in the background, where the ID is fetched using the YouTube Data API. Tubular loads, but is not loading the video I ask it to for whatever reason. Here is the related JS:

var output;
$(document).ready(function() {
  getURLPs(); //parses url params into an array, this works
  $('#content').hide().delay(7000).fadeIn('slow');
  console.log('ID: '+urlParams["id"]);
  console.log('Title: '+urlParams["title"]);
  tubularoptions = '{videoId: \''+urlParams["id"]+'\'}';
  console.log('Passing \"'+tubularoptions+'\" to jQuery.tubular.');
  $('#wrapper').tubular(tubularoptions);
  output = '<span class=\"animlink\"><a href=\"http://www.youtube.com/watch?v='+urlParams["id"]+'\">'+urlParams["title"]+'</a></span>';
  $('#nowplaying-text').append(output);
  $('#preloader').delay(1000).fadeOut('slow',function(){$(this).remove();});
});

The console reads the following:

ID: G15btlaZR_k
Title: Ryos ft. Allisa Rose - Eclipse
Passing "{videoId: 'G15btlaZR_k'}" to jQuery.tubular.

But then tubular loads the default video. Everything looks like it should work, but isn't. Any clues?

score 0 · Accepted Answer · answered Mar 12 '15 at 05:58

you are passing in a string instead of an object

this works

var output;
var urlParams = {id:'G15btlaZR_k', title:'Ryos ft. Allisa Rose - Eclipse'};
$(document).ready(function () {
    $('#content').hide().delay(7000).fadeIn('slow');
    $('#content').hide().delay(7000).fadeIn('slow');
    console.log('ID: ' + urlParams["id"]);
    console.log('Title: ' + urlParams["title"]);
    tubularoptions = '{videoId: \'' + urlParams["id"] + '\'}';
    console.log('Passing \"' + tubularoptions + '\" to jQuery.tubular.');
    //*************************************************
    $('#wrapper').tubular({videoId: urlParams["id"] });
    //*************************************************
    output = '<span class=\"animlink\"><a href=\"http://www.youtube.com/watch?v=' + urlParams["id"] + '\">' + urlParams["title"] + '</a></span>';
    $('#nowplaying-text').append(output);
    $('#preloader').delay(1000).fadeOut('slow', function () { $(this).remove(); });
});

so does this

var output;
var urlParams = {id:'G15btlaZR_k', title:'Ryos ft. Allisa Rose - Eclipse'};
$(document).ready(function () {
    $('#content').hide().delay(7000).fadeIn('slow');
    $('#content').hide().delay(7000).fadeIn('slow');
    console.log('ID: ' + urlParams["id"]);
    console.log('Title: ' + urlParams["title"]);
    //*************************************************
    var tubularoptions = { videoId: urlParams["id"] };
    //*************************************************
    console.log('Passing \"' + tubularoptions + '\" to jQuery.tubular.');
    $('#wrapper').tubular(tubularoptions);
    output = '<span class=\"animlink\"><a href=\"http://www.youtube.com/watch?v=' + urlParams["id"] + '\">' + urlParams["title"] + '</a></span>';
    $('#nowplaying-text').append(output);
    $('#preloader').delay(1000).fadeOut('slow', function () { $(this).remove(); });
});

jQuery.tubular not accepting input

1 Answers1