Does anybody know why the close button of the Lightbox is behind the Video and not on foreground on the iPad (Safari browser and WebView in App)?
Screenshot: http://i.stack.imgur.com/SYI9w.png
With other Elements (Image gallery, Text / HTML) the close button is rendered correctly.
On Safari with Mac OS X (not iOS) the close button works correctly as well with video.
The Lightbox is standard and the video is embedded with the video tag.
Thank you in advance for any hints!
Try setting position: relative on it; that can make a difference sometimes.
Under the hood, the video tag works kind of like a plugin. For a long time, browsers always put plugins above all content independent of zindex. I'm guessing the same thing is happening here.
Related
I designed a website for a client and had a developer (better than me) put together some Javascript which shows a video on hover. Works fine on all browsers except safari; it has a strange quirk.
The first time the page loads and the user performs the hover, the video plays no problem. If the user clicks on another tab (in the same browser window) and tabs back to the page, the video doesn't show. Just a box where the video should be.
Here's the page where you can see it in all its glory: removed
Video is MP4 H.264.
What the hell is the problem? The developer can't solve the mystery. Can you?
I have a script where I can toggle a fixed DIV in FullScreen mode. This div can also contains an HTML5 video which allows fullscreen (a video in a lightbox for example). However, in webkit browsers it creates a big conflict if the div goes in fullscreen and the div is also in fullscreen.
When the fullscreen mode is exited from the video player and the div, the layout is completely destroy because webkit browser still think that we are in FullScreen mode... In fact when everything is not in FullScreen, the user user agent stylesheet for the HTML5 video (:-webkit-full-screen-ancestor:not(iframe)) is still present and even with !important rules it doesn't change anything.
Does anyone have a solution about this issue? Is there some workarounds or maybe a way to turn off fullscreen from the DIV before the video goes in fullscreen...
Here a small example (the video styles are not preserved when turn off fullscreen): https://fiddle.jshell.net/VbfPC/4/
It's working fine in IE, FireFox but not in Google Chrome and Safari.
I'm using Crosswalk webview on Cordova to display a webApp made with Ember.js.
In some pages the app have iframes which open a Vimeo player, and I allow them to play in fullscreen.
When the user plays it, it enters fullscreen automatically, resizing the page to increase its height. But, if the user closes fullscreen (or when the video ends and the fullscreen closes), the page isn't resized back to the original height, and my top menu gets hidden behind the mobile status bar.
If then I navigate to another url, the page gets resized and everything is beautiful again.
My question is: is there any javascript/CSS trick I could try to get around this?
INFO: I tested this against 2 phones, one Android 4.1 and the other Android 5.0, and it only happened in the Android 5.0 one. So maybe this is a Crosswalk bug. Doesn't happen at all if I use the native webView, but I wanted to avoid switching to it.
Any help appreciated ;)
We're using fullPage.js, it provides a slideshow-like experience. We're embedding a Vimeo iframe into one of the slides which should cover the whole are of the slide.
Everything works as a charm in Chrome, but in Firefox and iOS it is impossible to scroll/swipe over the Vimeo iframe. fullPage just won't react to it.
I tried covering the video with a transparent div. Again, it works in Chrome, but on iOS the browser would not allow you start the video programmatically, so covering the video with a div makes it unable to start the video: Vimeo player says "Uncaught Error: The viewer must initiate playback first."
Is there a solution for this issue?
Here's a demo of the problem: http://jsbin.com/tunove/1/edit?html,output The video is on the second slide. Scrolling/swiping over it won't switch slides in Firefox and iOS.
You may try this CSS solution:
element {
touch-action: pan-y !important;
}
Where element is you would put the vimeo embed class/id. I haven't tested this but I've had a similar issue with something else I had where the swipe action was stealing the scroll action. Hopefully it'll help in your case as well.
For a current project that i am working i encountered a small issue.
I have a video that needs to be played in a lightbox on desktop, and on mobile to load directly from the source. I am currently building the website with wordpress and am using a shotcode plugin to display the lightbox with.
I guess i have to make a media specific call for mobile devices and let the specific div behave differently on mobile..
Can anybody give me some pointers and help or an example how i could possibly fix this?
Let's say you have a link to open the modal on desktop. This link can be hidden on mobile with the help of media-queries (i'm using some example classes here to illustrate the working):
Open video in modal window
The link shouldn't show up on mobile devices, since you want the content displayed right away. For the video you could use something like this:
<div class="hidden-on-desktop" id="modalWindow">Video here</div>
On the desktop this div should act like a hidden, modal window and on mobile it displays the content. You should style the modal window in a specific media-query since you don't want the content to be displayed like a modal on mobile devices.
Hope this helps a bit :)