A website I'm working on has a background video from YouTube using YTPlayer. To enhance the user experience, I have implemented a CSS spinner that displays while the page is loading. However, I noticed that the spinner disappears before the video finishes loading and starts playing.
$(window).load(function() {
setTimeout(function(){
$('.loader').fadeOut(1000);
$('.loader-bg').fadeOut(1000);
},4000)
});
To address this issue, I added a timeout to ensure that the video plays in the background before fading into view on the page. If anyone has a better idea on how to achieve this, please let me know!
Now, since mobile devices do not require the timeout (as only a background image is displayed), I am wondering if there is a way to conditionally run the timeout based on the device type - for desktops but not for mobile devices. Is such functionality possible?
Edit: Here is my temporary workaround using the following code:
if(jQuery.browser.mobile)
{
$(window).load(function() {
$('.loader').fadeOut(1000);
$('.loader-bg').fadeOut(1000);
});
}
else
{
$(window).load(function() {
setTimeout(function(){
$('.loader').fadeOut(1000);
$('.loader-bg').fadeOut(1000);
},3000)
});
}
I believe there may be a more efficient solution out there...