Vimeo fullscreen : video appears under the website's elements - javascript

I'm having a really strange issue with vimeo & html5 fullscreen player.
I have this code in my template :
<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).
You can experiment this bug here : http://webrelais.net/pingpong/projet/proxipolis
Has anyone experienced this issue ?
Thanks a lot for your help !

I solved the problem by disabling animate.css style on the element which included my iframe.
Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.

Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.

A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.
Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.

animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.

Related

Disable fullscreen on double-click?

I have an app which loads a webpage in a webview2 control (Edge Chromium), the page it's loading simply contains a html5 video tag with source and a bit of css for styling.
The css I'm using makes the video take up the full area of the browser page which is working fine, but I want to disable the ability to enter fullscreen (as in, taking up full area of desktop).
I can hide the fullscreen button in css by doing:
::-webkit-media-controls-fullscreen-button {
display: none !important;
}
But the video can still enter fullscreen when double-clicked.
I've tried moving the video to a secondary page sourced in an iframe with donotallowfullscreen but this still doesn't work, double-clicking still results in fullscreen.
<iframe src="Player.html" allow="autoplay; encrypted-media" donotallowfullscreen></iframe>
What else can I try to prevent the video from entering fullscreen? I've tried searching around on Google but all of the results are in reference to Youtube's video embedding.
Not sure why necessary, but here's full reproducible code....
Index.html
<html>
<body>
<iframe donotallowfullscreen src="Iframe.html"></iframe>
</body>
</html>
Iframe.html
<html>
<body>
<video controls src="video.mkv"></video>
</body>
</html>
There is the controlsList attribute which is in the process of being defined, but there are still some issues to sort out before it's official, and currently it seems to be implemented only in Blink browsers.
video{ max-height: 100vh; }
<video controls
src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"></video>
I didn't checked for IE, but for Safari, they don't even respect the allow of an <iframe> when the fullscreen request has been made by the <video>'s controls, because this fullscreen mode is not the one defined by the Web-API, but rather a native mode. This is also why in this browser we can't even call document.[vendor]ExitFullscreen() (in Firefox this would work because their current UI is using the Web-API).
So the only way to make this work in all browsers would be to make your own controls entirely, and to block the clicks on your <video> element (pointer-events: none).
Just I added controlsList="nofullscreen" attribute. But playing the video on click on the center of won't work. So I added onclick="vd.play()" attribute. <video id="vd" src="video.mp4" onclick="vd.play()" disablePictureInPicture controls controlsList="nofullscreen"></video>

PDF inside iFrame not working on iOS

I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js

Iframe Not Respecting Height Attribute

I have been trying to add a javascript map to my wordpress site and for some reason the iframe is not respecting the height attribute I set.
I've tried it using < iframe > tags and even with a plug in short code. Both lines can be seen here:
<iframe src="https://www.shiftins.com/county/index.html" width="100%" height="900" scrolling="no"></iframe>
[iframe src="https://www.shiftins.com/county/index.html" width="100%" height="600"]
And can be viewed live on this page: https://www.shiftins.com/test-page-1/
I have iframes running on other parts of my site and they work properly. How can I fix this issue?
BTW I have tried !Important and still no luck.
On your live site the height of the iframe is set in the style with "height:150px" :
if you remove this from your css it will work like a charm :

Vimeo iframe is causing a flicker

I have a site, with an embeded vimeo iframe. The page flickers when it loads, even more so in Chrome, and then again on your initial hover over the video. I was wondering if the iframe could be causing this. I fI remove it doesn't happen. If I leave and remove my javascripts it still happens. So I'm wondering if anyone has had experience with this.
this is the iframe code
<iframe src="http://player.vimeo.com/video/85534169?byline=0&portrait=0" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
thanks
the site is currently live http://www.miltonkarate.com
Got the same problem : iframe with html5 video into another iframe cause the page flickering. only in chrome, others browser works well.
Remove your frameset in your website to fix the problem :
http://bokushucom.ipage.com/Miltonkarate/
this works well without clicking

html + content spills out of iframe

I have an iframe and content inside it. In my IOS mobile safari browser, the content, instead of scrolling inside the iframe, spills out. It works fine for desktop version of the browser. Why does it spill for the mobile safari browser. The iframe is defined in following manner:
<iframe height='100px' width='650px' frameborder=0 src='/tandc.php#2'></iframe>
What kind of property changes we can make to fix this bug? Thanks in advance.
I'm not sure if that will solve your problem, but worth a try.
Try #Case solution from here and see what happen.

Categories