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.
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?
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.
I'd like to create a little chrome extension which plays subtitles over full-screened videos.
However, I'm not sure how to have chrome developer tools open while a flash video is fullscreened (so that I can see what's happening in the DOM), or even whether flash full screen somehow bypasses the DOM entirely.
Answers to either question (as to using developer tools, or how fullscreen interacts with the DOM) will be greatly appreciated.
Flash Player's native fullscreen happens separate from the DOM. Flash Player actually creates a new application window that is the size of your monitor. As for getting developer tools open during this, a second monitor may help, but the fullscreen Flash Player window might close itself if it is not the active Window.
It is conceivable that the Flash Player is being fullscreened by a fullscreen DOM element, but this is unlikely. If it says "Press esc to exit full screen" then it is fullscreened through Flash PLayer's native fullscreen.
Unfortunately, unless the SWF is being fullscreened with a fullscreen DOM element, I can't think of a way to add subtitles over the fullscreen player, using the DOM.
Is there a way to configure shadowBox to open up videos in fullscreen directly? I want this when you surf on the site with a mobile device instead of a popup.
If you are embeding flash based video players then answer is no.
Since there are security restrictions by which you can not call video full screen mode from javascript or from any other place that is outside of flash environment.
But you can make some pseudo full screen by placing your video player in some DIV that has width and height 100% and make some GUI elements and javascript logic to close that DIV on some event like onclick.
In case your video is HTML based, video tag you can call full screen mode from javascript.
More on calling full screen on video tag from javascript can be found here: https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode?redirectlocale=en-US&redirectslug=DOM%2FUsing_full-screen_mode
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.