Jump to content


These Forums Are Now Read-Only


For TubePress support, please post a question here or open a support ticket and we will be glad to assist.


Photo

Disabling Fancybox/etc for specific screen sizes [SOLVED]


  • Please log in to reply
5 replies to this topic

#1 Grant Kinney

Grant Kinney

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 09 July 2012 - 03:16 PM

I'm using TubePress to create a vimeo gallery for a client. They want the video to display as a thumbnail on the page, and then popup in Fancybox (or similar) to play. There is both a showreel video embedded at the top of the homepage (not loaded through TubePress, but simply an link directly to a vimeo video) and a small gallery of vimeo videos further down on the homepage (which is displayed using TubePress).

I have Fancybox v1.3.4 loading through my WordPress theme so it works both with TubePress and non-TubePress videos (Tubepress code to load Fancybox is commented out, as described here: viewtopic.php?f=18&t=1211&hilit=fancybox)

However, I don't want to load Fancybox on mobile devices, because it should play directly on the device using vimeo's player. For the showreel video, I'm using code like this to prevent Fancybox from activating on smaller viewport sizes (note that I will tweak this later to do some user agent sniffing as well):

if (window.innerWidth > 480 && window.innerHeight > 480) {
	    $('.showreel').fancybox({ 
			'padding': 0, //optional 
			'width': 960, //or whatever 
			'height': 540, //or whatever 
			'type': 'iframe' 
		});
	}

How can I get TubePress to behave the same way (using Fancybox only for larger screen sizes, and directly linking the to video for smaller/mobile screens)?

Here's a link to the site: http://ldp.grantkinney.com

#2 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 09 July 2012 - 05:37 PM

Thanks for the detailed question! Here are some pointers to how you can get this done. Note that it will require some modification to TubePress's JavaScript.

Here is where TubePress figures out how to play each video when the user clicks a thumbnail. The "playerName" variable is used internally, and in your case will always be "fancybox". You could probably follow the code if you like, but basically TubePress see "fancybox" uses this to finally invoke FancyBox. If, instead of "fancybox", it was "vimeo", then TubePress would send the user to vimeo.com to watch the video. So the goal is to make "playerName" be "fancybox" when a user is on a non-mobile device, and "vimeo" when a user is on a mobile device. Good so far?

I would change the above referenced line to something like:

var playerName = (window.innerWidth > 480 && window.innerHeight > 480) ? tubepressGallery.getPlayerLocationName(galleryId) : 'vimeo',
As you can see we just added some conditional logic. I think that should get you 99% there.

To make these changes, you'll want to do the following:

  • Open up sys/ui/static/js/tubepress-dev.js with your favorite text editor
  • Make your changes
  • Copy the contents of your edited sys/ui/static/js/tubepress-dev.js to sys/ui/static/js/tubepress.js. Overwrite the existing sys/ui/static/js/tubepress.js and optionally re-compress the JavaScript

What do you think?

#3 Grant Kinney

Grant Kinney

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 09 July 2012 - 11:22 PM

Thanks for the quick reply.

I'm getting there. I tried editing tubepress.js with the conditional logic like you wrote. That part seems to be working. However, the "vimeo" part doesn't seem to do anything.

When I replace line 418 with:
var playerName = (window.innerWidth > 480 && window.innerHeight > 480) ? tubepressGallery.getPlayerLocationName(galleryId) : 'vimeo',

nothing happens when I click on a thumbnail in a mobile browser. Desktop browser brings up the video fancybox like normal.

When I change it to:
var playerName = (window.innerWidth > 480 && window.innerHeight > 480) ? tubepressGallery.getPlayerLocationName(galleryId) : 'fancybox',

The mobile browser goes back to the original behavior, opening the video in fancybox.

So this tells me the conditional logic is working, but the 'vimeo' value doesn't seem to have any effect. I also tried 'static' and 'solo', which both had the same problem: nothing happens in a mobile browser window when clicking on a TubePress thumbnail. Ideas?

Thanks, again, for your help.

#4 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 10 July 2012 - 09:32 AM

That's what I get for not actually testing this code! The good news is that, since the conditional logic seems to be working as expected, this should be a quick fix. The problem is that I neglected the one other piece of tubepress.js that uses the "getPlayerLocationName()" function (namely here). So we just need to move the conditional logic to inside getPlayerLocationName(). Here's how to finish this:

  • Revert the change we made to line 418 so it looks the same as in the original.

  • Instead edit line 299. Change it from
    return galleries[galleryId].playerLocationName;
    to

    return (window.innerWidth > 480 && window.innerHeight > 480) ? galleries[galleryId].playerLocationName : 'vimeo';
  • Copy the contents of your edited sys/ui/static/js/tubepress-dev.js to sys/ui/static/js/tubepress.js. Overwrite the existing sys/ui/static/js/tubepress.js and optionally re-compress the JavaScript.
I think that should be the nail in the coffin. Please give it a try and let me know. And sorry for the detour!

#5 Grant Kinney

Grant Kinney

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 10 July 2012 - 12:25 PM

Good. Thanks for the correction. That works as expected--I can now have different player options based on screen size.

I tried all of the player options listed on the shortcode page (http://tubepress.com...ndix/shortcodes). 'Popup' gives me what I need: the video is loaded by itself. It doesn't autoplay on my phone (Android 2.3), but I think this is a vimeo issue.

Now comes the tricky part: figuring out what combination of user agent sniffing and screen size detection makes sense. If I decide to do this, I'm thinking the logic will probably end up something like this:
return (window.innerWidth > 480 && window.innerHeight > 480) OR (user agent is not mobile) ? galleries[galleryId].playerLocationName : 'popup'
What do I use for the "OR"?

Thanks so much for your help. Hopefully the client will be happy with this.

#6 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 10 July 2012 - 12:38 PM

return (window.innerWidth > 480 && window.innerHeight > 480) OR (user agent is not mobile) ? galleries[galleryId].playerLocationName : 'popup'

What do I use for the "OR"?


Syntax-wise you can just use "||". e.g.

return (window.innerWidth > 480 && window.innerHeight > 480) || (user agent is not mobile) ? galleries[galleryId].playerLocationName : 'popup'
If you're asking about how to detect mobile user agents, there are a slew of competing approaches for this. In my personal opinion there's no one right answer, especially since the distinction between "mobile" and "desktop" is getting blurrier all the time.

Good luck!