My client's site usesfancybox to load a lightbox for an embedded YouTube video. Clicking on the "play" image button in the middle of the video launches an embedded YouTube video.
This works fine on desktop, but will not work on my iPhone X (iOS 12). It will sometimes work for other iphone users after 3-4 clicks on the play button, but I cannot load it at all.
What should I be looking at to fix this on iOS? This is driving me crazy!
Page in question: https://www.maternlawgroup.com/
First, fancybox works fine, you can clearly see on the homepage or any other demo.
Secondly, in situations like this, you should start by checking output of browser console. There are a lots of JS errors on your page (not related to fancybox) and any JS issue can prevent further execution of the code. So, start by fixing them.
And last, I could not find fancybox on your page. It looks like you are using buggy custom JS code.
Related
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I have this webpage:
http://healthpad.net/dashboard/
It have 10 <video> elements on it.
For some reason, when I load the page on an iPad, it is not showing the video posters.
Try the following:
load the page on a desktop browser
load it on an iPad or iPad simulator, and you get a big black box with a play button
please tell me why this is happening?
Here's what I've already ruled out:
Image Content-Type header.
I've validated that the image content-type header is properly set.
In the example above, the Content-Type header properly image/jpeg.
Interference with the video.js library
VideoJs is used to show that nice play button on desktop browsers and to customise the controls. This library doesn't interfere with the native player however.
Just to make sure, I've created a test video page which doesn't have the video-js class, so the library doesn't pick up and process that video. In fact, the test page doesn't even include any JS library, it's just
<html><body>
<video
controls
height="400"
width="600"
poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
></video>
</body></html>
http://healthpad.net/rj_templates/test/zzz/
Usage of any video attributes that may not be supported on Mobile Safari
The test page above just has a plain video tag. I've tried removing every other attribute except for src and poster, it didn't help.
Most of the StackOverflow questions on the topic just say "Restart your iPad"
Here's where it gets weird:
If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".
So I've tried doing the same thing, at first I just said that it doesn't work in my case.
Then, I tried this:
(all of the following on the iPad simulator)
Go to the site, video posters don't show
Go to the test page (http://healthpad.net/rj_templates/test/zzz/), video poster doesn't show.
Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)
Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.
Kill Safari
Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
Now go to the multi-video page: (http://healthpad.net/dashboard/). Video posters don't show.
Go back to the single-video test page, the video poster for that one no longer works either.
Repeat steps 3 to 8 to see the process of when video posters stop working.
So apparently, at some point, Mobile Safari decides it will no longer show any video posters.
Also, apparently, my site triggers this condition.
Clarifications:
When posters no longer work, it doesn't only occur on one domain, no video posters will be loaded for any other site, regardless whether or not it's on a totally different domain (e.g. the demo video from http://www.videojs.com/).
In order to reset this behaviour, from what I've seen, you have to kill and restart Safari. Just closing and reopening it doesn't reset this state.
Does anyone have any idea why this is happening? Is there a way to work around it?
EDIT: looks like this no longer works. Not shocking given how much iOS has changed in the last 7 years.
I got this working by using a PNG instead of a JPG.
Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.
Changed the file format to PNG and it loads fine.
I see the question keeps getting upvoted once in a while, though there's no answer.
So here's what I ended up doing:
On iOS, instead of showing the video player (even with autoload=false), I will just show the poster and a play button, two standalone <img> tags.
When they get clicked, I create the video player from javascript and tell it to play. Works fine, users don't see much difference.
I fixed it by adding preload="none" to my code.
<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">
In Safari settings [iOS7] Block Pop-Ups turned "OFF" seemed to cure this for me, hope this helps.
Well if someone is still stuck on this is how I managed to get it done in React.js but the algorithm itself should be useful in any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
So here's the challenge. Make a clickable popcorn link OVERLAYING the video. Simple enough on desktop, but iOS is proving to be a challenge. If the video element has the controls attribute iOS hijacks all clicks within the video window, making the link overlay un-clickable. However if the controls attribute is not present on the video element, the popcorn links are clickable and work well.
Problems is, now there are no video controls. And I need those. So I figured some hand written javascript based video controls should work out fine. No controls attribute on the video tag so popcorn overlays are clickable, plus working controls! My attempt with this is to use video.js.
So now I have video.js video controls and popcorn living in harmony on desktop. But on iPad the video.js part works, but the popcorn part doesn't anymore. I get the video.js controls, but no popcorn events fire. However there are NO ERRORS, and the script executes completely.
Does anyone know what is happening here? Why would video.js stop popcorn only on iOS? Is there a solution?
PROBLEM DEMO
VideoJS has to make changes to your web page to insert all its controls and get them positioned correctly, and that includes moving the video element around. Mobile Safari is notoriously sensitive and a little bit weird about this stuff. It looks like VideoJS is removing your original video element and replacing it with a new one, and this is happening after Popcorn has attached it self to the original.
Debugging minified Javascript on Mobile Safari is no picnic, so I can't tell exactly why VideoJS is doing this on the iPad and not other browsers. But using the console, it's possible to get a rough idea what's going on:
document.getElementsByTagName('video')[0] ===
window.Popcorn.instances[0].media
//false!
That means the video element that Popcorn is listening to is not the same one that you're seeing and playing in your web page. From this command...
window.Popcorn.instances[0].media.parentNode //null!
...you can see that the original tag exists in memory but is not attached to the DOM. So while the new video plays along, the original one is stuck paused at 0:00.
The solution is to set up your Popcorn instance after VideoJS is done doing its business. And then make sure you reference the video element properly, because now '#popacorn' references a <div>, and the new video element is called "popacorn_html5_api". That should cover you for iOS as well as desktop browsers.
I had the same problem in Firefox. Popcorn not working with videoJS.
I solved my problem like this:
jQuery(function(){
_V_('videoid').ready(function() { // videoJS ready ?
console.info('videoJS ready : player ID = '+$(this).attr('id'));
console.info('videoJS ready : videoObj ID = '+$('#videoid video').attr('id'));
var pop = Popcorn( "#"+$('#videoid video').attr('id') );
// etc...
});
});
Like said brianchirls, videoJS makes a div id = "videoid" containing a video id = "videoid_html5_api", so the object id="videoid" is no longer a video object.
I am trying to open a specific page of a pdf (for example, http://cb.vu/unixtoolbox.pdf#page=14) inside an iFrame. While it works on desktop browsers, it is not working on an iPad.
Also noticing that, this does not work on the iPad even without the iFrame if I want to go the page 14 by typing http://cb.vu/unixtoolbox.pdf#page=14 directly in the address bar of mobile safari.
Has any of you came across this problem? If so, how did you solve it?
Thanks a lot for any help!
I made some media items(video,audio) by mediaelement.js in a list page with infinite-scroll and isotope jquery plugin. I use the infinite-scroll for going next page. it's a ajax plugin. There is a viedo item(c1) in first page and a audio item(c2) in second page. When scroll to bottom, the second page(c2 audio item) will be loaded.
The problem is when the page is runing in ipad and iphone, when infinite-scroll the second page, the c1 video can't be played, it's always loading. It works fine in firefox and chrome of pc. Please help me to check the codes.
(This's the link.)
I got the answer.
this codes will be ok, hope to help somebody:
jQuery(newElements).find('audio,video').mediaelementplayer();