Magnific Popup javascript video popup

JavaScript
1

I’m trying to get Magnific Popup to work on an iPhone 4s. When the image is clicked, instead of playing the video in the browser, it goes to the Vimeo website. The javascript used can be found here:

It works fine on desktop computers, both mac and pc but not on an iPhone 4s (haven’t tested it on later versions). Does anyone know of a workaround?

2

Not my area of expertise, and I don’t want to sound trite, but I believe that the iPhone 4 line is old enough to not really worry about. Have you checked any webmetric sites to see what percentage of browsers used these days are iPhone 4 browsers?

V/r,

^ _ ^

UPDATE: I just checked WikiPedia and the iPhone 4 line was introduced in 2010. Eight years ago, as of this typing. I wonder how many iPhone 4s are still being used. The last iPhone 4s was manufactured in mid-late 2014.

1 Like
3

It looks like from the documentation that the popup is disabled on small screen.

Popup with video or map
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.

Look for disableOn in the API for more information.

4

Thanks for the reply. So to disable this, would I just comment out the following lines?

disableOn: function() {
if( $(window).width() < 600 ) {
return false;
}
return true;
}

I’m actually not sure of the width of an iphone 4s.

5

I know that the iPhone 4s is old but some people still use them (including me) so I just wanted to cover everyone.

6

The following code was found in the jquery.magnific-popup.js file:

	var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;

	if(disableOn) {
		if($.isFunction(disableOn)) {
			if( !disableOn.call(mfp) ) {
				return true;
			}
		} else { // else it's number
			if( _window.width() < disableOn ) {
				return true;
			}
		}
	}

Also, disable is set to 0 under defaults:

	disableOn: 0,

So it seems to be switched off.

Any further help appreciated.

7

I am definitely out of my league here, but in my dated experience, “0” would mean “disabled” and “1” would mean “enabled”. Therefore, changing disableOn from “0” to “1” sounds like it would enable the disable-at-narrow-widths feature.

Just a guess. Try it. What’s the worst that could happen? :upside_down:

8

Thanks for the suggestion - I just tried that but it didn’t help. My jquery is only basic so I don’t know how to fix it. Also, I’m using Safari on my iPhone so it may just be that browser. I’m unable to install Chrome as it’s an outdated iOS.

9

Are you sure you are not setting it back on somewhere else.

Post a working example so we can test your code.

There may be a reason why pop ups are disabled on small screen anyway but I couldn’t see it mentioned in the documentation.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.