I have a same layout on homepage and test page. The problem appears only on iOS: the video plays on the test page, but not on the homepage. Nothing in the console. Same html, same js, same css, same video file, same poster, etc...
Any idea ?
Cheerz
Well, my bad... there was a little CSS difference between the two pages : the home page had a position: fixed element as deep parent.
So the lesson is : no position: fixed on (deep) parent of the <video> tag if iOS is needed.
Related
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
I'm developing an ionic app in iOS, I placed the pdf inside an iframe just by simply doing the following:
<iframe src="https://docs.google.com/gview?embedded=true&url=http://example.com/resources/myfile.pdf" mozallowfullscreen marginwidth="2" marginheight="2" width="90%" scrolling="auto"></iframe>
I didn't used cordovaInAppBrowser because I ran a lot of problem like after clicking the button the InAppBrowser doesn't open unless I don't minimize the app. So I just used iframe as the workaround. But the problem now is that, after the pdf being loaded, and the user clicks on the full screen of pdf, there's no back button. Is there a way I can remove the full screen button from the pdf or add a back button on full screen mode of pdf? I tried removing the mozallowfullscreen but doesn't work since it's for the iframe not for the pdf.
P.S.
I tried accessing the div inside the iframe that holds the button for full screen, but no good, it doesn't get the div, it's probably because I'm violating the Same Origin Policy.
Here's the code on how I tried to access the div:
$('#myframe').each(function(){
console.log($("div[role='toolbar']"));
});
I am using an iFrame for embedding a youtube video in my iOS/iPad application, application displays video nicely, but the problem is, it always streams a low resolution video, I did try all of the "hd=1" of "vq=large" and a few more things. it's not helping. Any help will be greatly appreciable.
go to the Share tab below the video, then the Embed tab
copy the html provided and paste into your site’s editor, should look something like this:
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/RrphKwWOfcg?rel=0″ frameborder=”0″ allowfullscreen></iframe>
then add the magic html additions (in bold)
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/RrphKwWOfcg?rel=0&vq=hd1080” frameborder=”0″ allowfullscreen></iframe>
(or ?rel=0&vq=hd720 for 720p)
The document has a number of divs only one of which is visible at any one time (others are display:none).
When a div which was visible is hidden and then made visible again the videos within the div don't play any more.
However this is only a problem on iPad.
Any suggestions as to how to re-initialise them?
thanks
Derek
Having searched in every possible way for a solution it does seem that videos using video.js in a container that is hidden after video.js has initialised them become unplayable when made visible again.
So for now, when my pages detect that the browser is on iPad/iPhone they use the native video player.
To do this I place the includes for the video.js inside a javascript block in the head of the page so they are not loaded if iPad or iPhone is detected.
<script type="text/javascript">
if(!navigator.userAgent.match(/iPad/i) && !navigator.userAgent.match(/iPhone/i)) {
document.write('<link href=\"\/\/vjs.zencdn.net/c/video-js.css\" rel=\"stylesheet\" type=\"text/css\" \/\>');
document.write('<script src=\"\/\/vjs.zencdn.net/c/video.js\" type=\"text/javascript\"\>\<\/script\>');
}
</script>
I had this problem on firefox but it was because I was trying to stop the video after move its container div to a hidden div. I removed the "stop" code, the player seems to reinitalize?(and stop by itself) after being moved from one div to another on chrome, firefox and opera.
Before this simple solution, I thought to just re-add the video original html via javascript, it probably can be done after the div is hidden or before it is shown.
I have problem with html page with <object><embeded> video and lightbox2 plugin for pictures. These two component not going very well on the iPad, because when I click on thumb image and lightbox2 comes up, lightbox is under embeded video.
How can it be fixed?
Ofcourse the right version could be that embeded video will under lightbox.
I see on lightbox.css file and z-index: 100;
Already trying <param name="wmode" value="transparent"></param> for embeded video.(youtube video), but no success
And one very important note. In computer desktop browser it's going good. So only on the iPad it's showing bad.