kmlin / jquery-tubular

Automatically exported from code.google.com/p/jquery-tubular
MIT License
0 stars 0 forks source link

Hide script from Mobile browsers #32

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
The script works fantastically well as intended on a non-mobile devise. But on 
an andoid browser, tablet in my case, the video does not play because of flash 
not being an availble plug-in and even with the flash plug-in installed. The 
page goes out of wack as any mobile browser I've tried does not reder it well.

So my question is:
Can someone come up with some code that will hide the script if a mobile 
browser is detected.

Even using a media query does not work because most tablet browsers can handle 
the desktop version of a site. 

If using a Agent sniffer to detect mobile and redirect, that means you will 
have to recreate the site for a mobile version - which Im trying to avoid.

Using css, I'd like to hide the script if the max-width is 768px lets say.
Im not the best at css so I dont know if this is possible.
Can't hide the wrapper because then the whole site disappears.
Just need to strip the code if mobile is detected or if screen size falls below 
768px... Any ideas anyone?
thanks in advance.
Love the script.

Original issue reported on code.google.com by emarketa...@gmail.com on 6 Jan 2013 at 6:45

GoogleCodeExporter commented 8 years ago
I would go something like that:

if (window.matchMedia("(min-width: 769px)").matches) {
       $("#wrapper").tubular({
           videoId: 'idOfYourVideo',
           mute: false,
           repeat: true
       }); // where idOfYourVideo is the YouTube ID.
   }

It's pretty simple: run tubular.js only when viewport is bigger than 769px

Hope it helps.

Original comment by nicola.z...@gmail.com on 17 Apr 2013 at 8:20

GoogleCodeExporter commented 8 years ago
Hi Nicola,

I could not get this to work. Im not sure where you meant to place this code.
Can you or someone give me more direction here.

So i run this as a script on the particular page?
thanks

Original comment by emarketa...@gmail.com on 1 Jul 2013 at 7:54

GoogleCodeExporter commented 8 years ago
This sounds similar to the issue I just posted about users needing to interact 
with a video before the api will work. Might try the patch in 
https://code.google.com/p/jquery-tubular/issues/detail?id=44 and see if it 
helps.

Original comment by b...@stupil.com on 23 Aug 2013 at 4:51

GoogleCodeExporter commented 8 years ago
Excellent, works fine! Thanks Nicola!

Original comment by e...@guigo.net on 21 Oct 2014 at 1:08