tubular
tubular copied to clipboard
Reinitializing tubular after AJAX call
Is there a way to reinitialize tubular after an AJAX call?
I have a front page, that has a video background created with tubular. I've even put it in function, so that I could call it on success()
in ajax, but nothing happens. The code is like this:
var video_settings = {
ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
videoId: 'LOKzaU4soXw', // random video
mute: true,
repeat: true,
width: $(window).width(),
wrapperZIndex: 1,
start: 0,
end:0,
};
function video_init() {
$('#wrapper').tubular(video_settings);
}
video_init();
In my ajax I have, inside success: function(data, textStatus, jqXHR){}
if ($('#tubular-container').length && $('#tubular-shield').length) {
$('#tubular-container').show();
$('#tubular-shield').show();
} else {
video_init();
}
This is because If I'm on my front page, I'm just hiding the tubular containers when I'm loading other pages, but the video will go on loop in the background. I'm loading other pages in a different wrapper than that of the video.
If I'm on a different page, and want to go to front page with ajax, I will initialize the video (I'm using php to get my pages).
The strange thing is that I can see the #tubular-container
and #tubular-shield
in my DOM, but the video is not initialized (in the second case when I'm not loading the front page). I can even see the video_settings
variable (object) in my console if I output it with the console.log()
inside the success
.
Any idea why the player is not showing? I don't have any other errors on the page...