Sorry for the badly worded title, it's hard to summarise this.
I've got a fixed header at the top of my website, and then I've got some videos that are iFramed in (from Vine and YouTube mostly). My problem is that even though the header is fixed, with a higher z-index, and it's APPEARING higher than the video iFrames, it's not behaving that way. This seems to be due to the iOS Video frame, or whatever you want to call it.
I've put this mock together to show you what I mean:
https://dl.dropboxusercontent.com/u/324723/Web/vid_iframe_fixed_issue.html
Expected behaviour is - Scroll down, then tap on the header while it's overlapping some text. The header text has an anchor hover tag, so it'll turn black. This is what should happen.
Refresh, then scroll the page down until the header overlaps the first video (Vine), then try and click on the header, over where the video should be (say the letter "A"), it'll load up the video.
Refresh, then scroll down the page until the header overlaps the second video (YouTube), and try again: it'll work properly, because YouTube has a splash screen. However, if you then load the YouTube video, click 'Done' to get out of the video, and repeat this process, you'll have the same issue as with the Vine video, because the splash screen is gone and the iOS Video frame has replaced it. Vine has no splash screen, so this issue is apparent immediately.
Why is it displaying the header above the videos, but still prioritising the video on tap? This is only an issue with iOS, Android seems fine. Am I doing something wrong, or is this an inherent issue with iOS?
edit: This is an issue on other sites too (see Mashable or Instagram). I'm not so sure there's a way around this.
Related
I'm experiencing an issue on iOS10 (Safari only, Chrome is perfect) which is being caused by a Vimeo embed which plays in fullscreen natively on iOS. The video plays perfectly, however when I click "Done" and the video closes it affects the positioning of the sections (website uses fullPage.js). Please see the URL below:
http://rorymstaging.wpengine.com/stack/#thestoryof2016
This doesn't seem to happen every time, but if you play the video and close it a few times you should see that the positioning is affected. The screenshot below shows the issue, obviously I'd love the video to return to the center of the screen when not being viewed:
I've tried inspecting the code to see how the positioning is being affected and have tried a few CSS only fixes but nothing seems to correct the bug. Any help would be greatly appreciated...
Lewis.
I load a UIWebView with an html script that contains embeeded video (almost all from youtube). Reproducing videos was working ok. But since this was tested on iOS 10 the full screen takes all the screen but the video itself dont increase nothing, just only center and dont change size. But if i try with iOS 9 or 8 the full screen resize the video to fit all the screen
I think iOS has implemented new rules about the default video player on webview, or something is missing on the html script. I was trying to add tags like on the script and css rules, but nothing yet. Thanks.
if on iOS 10，use wkwebview，otherwise uiwebview，if else solve it
I'm working on an ios app written in swift, xcode7
A view has a UIWebView on it.
using loadRequest(NSURLRequest) we load a pdf file from disk.
This works fine, but sometimes the pdf file cannot be scrolled past the first page or what you see first on the screen. I can't pinpoint what causes the not-scrolling as sometimes I open the same file again and then it scrolls.
Trying to scroll when it doesn't want to bounces the bottom part of the screen and you can see there is another page, but you can't scroll it into view.
The UIScrollView contained inside the UIWebView (this is the default) knows there are more pages, because it shows "1 of 3" on screen.
The UIWebView
has 'scales page to fit' checked
has 'user interaction enabled' checked
has 'multiple touch' NOT checked
has 'autoresize subviews' checked
has mode 'Scale To Fill'
I have tried the following:
checking if the scrollview is not larger than the screen by placing a border around it: no, it fits on screen and is as large as you would expect
setting the internal UIScrollView.scollEnabled to true in code
In the application, when showing the UIWebview, it is resized on screen by collapsing an element above it, but I have tested this with fixed heights and it doesn't change anything.
When I call flashScrollIndicators() on the internal UIScrollView, this is consistent with the scrolling or non-scrolling. If you see the scrollbar flash, then scrolling is possible. If not, then you can't scroll past the first page.
Any other ideas I can try?
This sounds like a weird UIWebView problem.
Two additional things you can check :
Is the issue resolved after you rotate? (had this happen to me once)
If you call flashScrollIndicators on the internal UIScrollView and it's not responding. Is the internal UIScrollView a nil object?
Another solution is to try and use WKWebView. It might resolve the issue. Just be sure to only use it in the last versions of iOS.
You can also step down a layer and implement it with CoreGraphics since you have the PDF on the device itself and not on the web (official docs). There is probably a good CocoaPod or Carthage framework you can use for this.
The underlying problem was the fact that before loading a new pdf, the UIWebView was cleared each time by loading 'about:blank', which is the most suggested solution to clear the webview. However, when working with pdfs with different page sizes and different number of pages, this seems to mess with the built-in scrollview.
The solution in this case was to create a kind of 'blank' pdf with a single page (and maybe an application logo in it to distinguish it clearly for the user) and instead of loading about:blank, load this pdf instead before showing the webview to the user and while waiting for the real pdf to download to the device.
I'm in the process of updating an older app I've developed to new iphone 5 screen dimensions. I have a page that I was able to stretch vertically but I have a weird issue.
Problem
Currently the page looks like this:
Everything is stretching as normal. As you can notice, at the top I have a button that links to a video. When you press this button, the default iOS "videoView" we'll call it, comes up and plays my video like normal. When I press the "done" button to exit the video, here is what my page looks like when I return.
You can see the view gets stretched horizontally and vertically. Springs and struts for this view are as follows:
Any idea what might be going on here?
EDIT
Here is the view hierarchy. It's custom.
Not sure if it is the exact same problem, but I think there is a WWDC 2012 video showing a problem with the evolution of ViewControllers, perhaps it is the same problem you are facing.
The video is : Session 236 - The Evolution of View Controller on iOS
and also the sampling code of this video can be usefull.
To get the video go to you apple developer account and videos are freely downloadable through iTunes.
Link to WWDC 2012
Hope it will help you
EDIT
I went quickly through the video and I am not sure it is the same problem as you. However this video explains new iOS6 features in the layout and hierarchy of the view controllers which I hope will help you.
I'm working on a WebApp that is supposed to run mostly on iPads. The App plays several videos and has some interactive components as well.
My problem is cosmetic: even though the HTML5 Video Tag works fine, the custom controls that I've created control the video/audio playback just fine, for the life of me I can't figure out how to make the black bars on the side of the video disappear.
The embedding is completely standard:
<video id="video" src="./video/video.mp4" width="1024"></video>
I just want the damn video to be exactly as wide as the iPad screen, but no matter what size I specify, there are always black bars on the side. The only workaround i found is to oversize the video and then give it a negative margin so it'd center, but surely there must be a better solution... Especially because the width of the black unwanted "margin" isn't constant and changes according to the specified width of the video. Has anyone had the same problem before? Any idea or help will be greatly appreciated. Thank you all.
Thanks for the input. It turned out that I had to specify the height for the video element as well, for some reason Safari on the iPad doesn't scale the video and the controls properly; as soon as I explicitly specified the pixel equivalent of 16:9 within the actual video tag,
in the HTML file, the bar disappeared.