I'm creating a Wordpress site using HelpGuru by HeroThemes (https://herothemes.com/)
I added an iframe to show a vimeo video. This is my code snippet:
<div style="padding:55.83% 0 0 0; position:relative;">
<iframe src="(url)" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute ;top:0; left:0; width:100%; height:100%;" title="(title)">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
I removed the original url and title of anonymous reasons.
What I expect, and what I also get when I add this code snippet in any html editor (like W3Schools') is to display the video including a fullscreen button to show the video in fullscreen.
However the button is always missing.
What I tried:
I added allow="fullscreen" (How to enable fullscreen in IFrame) aswell as the allowfullscreen tag (see iframe docs).
In the wordpress preview it also does seem to work. Theres no extra styling added to it.
I also tried to have a look at the iframe with the chrome dev tools, there the buttons' display property is set to "none". However just forcing it to be "flex" is not going to work, as the button would not do anything then.
Related
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>
I am working on my personal website.
My website contains a youtube iframe. When mousing over it, the document stop scrolling. I want the main document to continue scrolling even if the mouse was over the youtube video.
<div class="video-container"><iframe width="950" height="480" style="margin-top: 10px" src="https://www.youtube.com/embed/fL3QKagSn1s#t=0m00s" scrolling="no" frameborder="0" allowfullscreen/></iframe></div>
</div>
enter link description here
Try wrapping it into a div and set that div's z-index:10 or something, so this will cause to not mouseover to the iframe but to the div.
A white bar appears bellow the footer of my Wordpress site. I try to see what it is with the Chrome developer tool and it looks like it is an iframe.
I don´t know how this happened but the problem was not there a few weeks ago. It does not happen on my chrome browser but when I try it in any other browser or PC I see the white bar.
The site is http://preposicionesdeplacer.com/
The white bar you're seeing on some browsers is the body of your page.
It changes along with the body if you test it.
I added the following attributes to #colophon and the effect disappears across all my browsers.
position:absolute;
width:100%;
Its normal because below your footer you have several iframes. This one as you can see bellow has the display element set to no.
<iframe src="http://loadus.exelator.com/load//net.php?n=eJyVkmFLwzAQhv%2FKKK4f07Td5qbLirAO%2FLBvCoJIuSYxzWza0GS4%2FnuvdYIgAweBXN7k7rk3yVobNamkVpVnQRxMPrXw1Ri5jrOg8t7eRZHrG04M%2BMqDIrw1oxBhamZ8IU9asJhSugw7KXTHhqRp%2BjBNdjjqFoQh8iRr8G03JJ%2FFYTvd4cFtQmfTZKEwimmM0QEjinN5xMKv%2B33x%2FPy4fQs264G4Wf%2BrY24cgQbq3mvuSA9V246No55Z6HwjuwKr5y%2F5U36pMtQ452PncgseLrF0SUA0JzcClPTYdlNm582%2F%2FkcpyixD36FiNJ6FpWY36DE8MHqtTaKIaI9lLXmt%2BQdppI%2BsRlqm2lbVsmjQ5TddhmDs%2FVnm5vfK8euwIIg7WeIM3iRy7Ygd%2FkTmeysZfoNQOHsc3i8BWK3SZUrn5ewdYElXlM6TBZeLW1qKZP4D%2FgKO89UZ&h=75343745526d1625180b3cc2f82b37c2&ver=2" width="0" height="0" frameborder="0" style="display: no;"></iframe>
So just put this and normally it will hide this iframe too :
<iframe src="http://loadus.exelator.com/load//net.php?n=eJyVkmFLwzAQhv%2FKKK4f07Td5qbLirAO%2FLBvCoJIuSYxzWza0GS4%2FnuvdYIgAweBXN7k7rk3yVobNamkVpVnQRxMPrXw1Ri5jrOg8t7eRZHrG04M%2BMqDIrw1oxBhamZ8IU9asJhSugw7KXTHhqRp%2BjBNdjjqFoQh8iRr8G03JJ%2FFYTvd4cFtQmfTZKEwimmM0QEjinN5xMKv%2B33x%2FPy4fQs264G4Wf%2BrY24cgQbq3mvuSA9V246No55Z6HwjuwKr5y%2F5U36pMtQ452PncgseLrF0SUA0JzcClPTYdlNm582%2F%2FkcpyixD36FiNJ6FpWY36DE8MHqtTaKIaI9lLXmt%2BQdppI%2BsRlqm2lbVsmjQ5TddhmDs%2FVnm5vfK8euwIIg7WeIM3iRy7Ygd%2FkTmeysZfoNQOHsc3i8BWK3SZUrn5ewdYElXlM6TBZeLW1qKZP4D%2FgKO89UZ&h=75343745526d1625180b3cc2f82b37c2&ver=2" width="0" height="0" frameborder="0" style="display: none;"></iframe>
Tell me if that worked well for you, as for me it hides the iframe
I'm trying to follow this tutorial (http://www.cssplay.co.uk/menu/cssplay-tutorial-vimeo-hide-controls.html) but the fiddle I created with its code doesn't seem to work. I'm not sure what I'm missing.
https://jsfiddle.net/uxhxdcwp/
<div class="overlay">
<iframe src="https://player.vimeo.com/video/134945180?
api=1&player_id=video" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen id="video"></iframe>
<div class="playpause start"></div>
There are a few issues:
You have accidentally left out the closing brackets }); in your script, resulting in an unexpected end of script error
Do not load scripts using <script> tag in your fiddle. Instead, use the external resource panel. However, since the plugin is not served over a secured connection, I have placed the actual plugin code before the start of your JS.
And now it works: https://jsfiddle.net/uxhxdcwp/1/
I'm building a popup window. I use an iframe to cover backgroud content then show a div over this iframe to show popup content.
In the background page I have a YouTube video embedded, code sample:
<iframe width="560" height="315" src="http://www.youtube.com/embed/2XY3AvVgDns" frameborder="0" allowfullscreen></iframe>
My problem: The YouTube video always shows on top and covers my popup window.
Note: My code works fine on IE and FireFox, but not GoogleChrome
How can I let my popup window show on top in GoogleChrome?
Change the url to:
http://www.youtube.com/embed/2XY3AvVgDns?wmode=transparent
Notice the ?wmode=transparent parameter.
Setting visibility style property of the <iframe> element to hidden should help.
Can you modify your iframe to object. If yes, try using
<param wmode="transparent"></param>
Hopefully it should work.