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.
Related
I have multiple iframes on a page that when they start to play they automatically go fullscreen on mobile. I am using the youtube api to load the videos and have a "cover" image over the top with a custom play button. On mobile, when the user clicks the play button the cover image disappears and the video goes fullscreen and starts playing - so far so good. But what I need to be able to do is that when the user clicks 'done' the video leaves fullscreen (which it does) and the cover image comes back up (which it currently doesn't). The problem is that I cant seem to detect when the user clicks 'done'.
I've tried using:
$('iframe').bind('webkitendfullscreen', function(){
// code in here shows the cover image but even just a standard alert isn't firing.
$('#coverImage').show();
});
No matter what I do the webkitendfullscreen isn't firing. Is there no way to detect when an iframe is done on mobile?
any help/pointers appreciated!
According to the answer from powtac from this SO post:
You can not interact with iframes which are not under the same domain.
This is always prevented by the browser's policy.
I think from this SO post you will have a hint on your problem.
You can check this SO post as well.
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.
When I set up a youtube player in an iframe in the normal way ( like this https://developers.google.com/youtube/youtube_player_demo ), and make a new html element (button) positioned over the top of youtube's iframe, any touch of the video player seems to be "caught" by the video controls so the user cannot tap the button I've made.
Removing the controls with the parameter "controls=0" solves the problem, and the user is able to tap the button. However, I need to find a way around this whilst leaving the controls on - at the moment the only option I can see is building my own controls overlay on top, which is not desirable. The fact that youtube seem to be able to grab and not grab the touch interaction would seem to prove that it is possible in some way with the JavaScript.
-not a problem on Android tablets.
Thanks in advance to anyone who can help!
According to this other SO post, limitations exist on iOS, where "...embedded media cannot be played automatically/programatically in Safari on iOS - the user always initiates playback."
I am using the youtube api to create a flash video inside of a twitter bootstrap modal. It works fine in all browsers except in chrome. After closing the modal and hovering over buttons or images fragments of the video appear in there place. I tried changing wmodes, opacity, visibility. I can't post a link because it's a client project that is in development. Does anyone have any experience with this? Thanks in advance!
The default css3 transition properties that are for the bootstrap modals were causing a repaint issue. After removing the transitions this no longer occurred.
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.