I have a youtube video introduced by <iframe> tag (I tried by <object> also, but the results are the same). On the load page, I have a dialog modal also (that it works properly).
I don't understand why, only on IE11.0, this video is not "hidden" (meaning inactive, like all other elements of the site, until the window is closed).
Is it something special, particularly for IE, that I need to add in css? I tried z-index (only idea which I had), with negative values for this video, but it doesn't work. It is a bug of IE? I have no idea...
Thanks in advance.
PS. If it is necessary, I can add the css file also (but it's a little big).
PS.2. I repeat, for other browsers (Chrome, Firefox, Opera and Safari), this works properly (the video is inactive while the dialog modal is active (not closed).
Related
I have a video element that’s working beautifully with the standard controls in Safari (OS X 10.11 - El Capitan). I have play / pause, the scrubber, captions, and even AirPlay. …but there’s no full screen button. I swear I’ve seen that button on the normal controls before. The WebKit blog even has a screenshot with the button in an unrelated article (backdrop-filter is rad though, check it out).
Is this seriously not standard functionality?
I’ve added fullscreen to the video and source tags and even fullscreen="fullscreen" for good measure. The controls tag is working (I see the controls after all).
iOS’ controls are visually different and include the full screen button.
I’ve been hunting around and the most popular thing I can find is this super old StackOverflow article that basically says I need to use Javascript. That doesn't seem right. I feel like I’m taking crazy pills!
I suppose this could explain why so many sites roll their own controls using the JS hooks but it seems like a lot of work for expected functionality.
I realize I’m just asking for a ding in my pitiful reputation but I hope I’ve just missed something obvious.
Thank you in advance for your help / downvotes. :)
I was in a panic over the problem until I discovered that a <video> contained in a "popup window" instead of a regular window/tab is will cause the <video> tag to drop the fullscreen button in its controls.
My "page preview" happened to be launched in a pop-up window, and having maximized that, it took me a while to eliminate various factors before concluding that it was a popup vs. normal window/tab issue.
The behaviour that I experienced was in Chrome. I haven't tried it with other browsers.
Additionally: Also, note that within IFRAME also behaves the same way, dropping the fullscreen button, too (from the comments).
I figured this out, it was at least half stupidity.
Heading
I had the video element set to use max-width: 100% so it would fill the container on the page. I didn't think that would have any effect on the video's ability to go full screen.
No Metadata
The video didn't have any metadata to preload in the first place. I used an app to add a title to the file.
Does the fullscreen toggle button show up when you start playing the video?
According to Apple's documentation:
The webkitSupportsFullscreen property is not valid until the movie metadata has loaded. You can detect when the metadata is loaded by installing an event listener for the loadedmetadata event.
It seems there is some support in the video file that needs to be checked for before fullscreen support is enabled in the controls.
When viewing an HTML5 video on both Chrome and Safari, the fullscreen toggle button doesn't appear until the video has started playing.
EDIT: you might be able to get around this behavior by adding preload="metadata" to your video element.
I have an iframe embedded deep within a webpage, this iframe is intended for displaying various SSRS reports. It used to work in ie9 and ie10 (still seem to work in ie8 and ie11), however some "upgrade" between version 9.0.5 and 9.0.43 broke displaying SSRS in iframes. What happens is that the report gets a very narrow width rather than using the entire area, so all reports gets clipped. Reports work fine in a tab by itself, it is just iframes that seem to be broken. If "Page Width" zoom is selected it does show everything, but it tries to cram it into the same very narrow space, making the text too small and unreadable. How can I get the same behavior as before (as ie8 and ie11) where it utilizes the entire width for the report instead of clipping the report? 100% width is specified on the iframe, however it does not seem to be pushed down. The top parameter seem okey, it is the report section. The zoom select button is not shown on ie11, not sure if that is related or not. Seems like regardless of what parameters I enter, they are all ignored. Tried this
rs:Format=HTML4.0&rv:ToolBarItemsDisplayMode=143&rv:DocMapAreaWidth=1500&rs:Command=Render
and it does not have any effect on output nor toolbar.
I have read about this issue elsewhere, however all "solutions" seem to be to revert the entire webpage back ie8 compatibility mode, that is just not an option that is feasible for me due to the complexity of the web application.
The iframe I use looks like this
<iframe src='http://Host/ReportServer_SQLSERVER2008R2/Pages/ReportViewer.aspx?%2fBase%2fPeakRate&rs:Command=Render' style='width: 100%; height: 100%'/>
After many trial and errors and scouring through obscure websites describing internet explorer quirkiness etc. I found that using an
<object data="xx"/>
tag instead of
<iframe src="xx"/>
seemed to solve the problem. Also Compatibility View had to be turned on. Apparently ie9 does not handle iframes the way that other browsers does.
I've loaded a page with multiple SVGs on chrome.
when I zoomin/out one of the SVG is disappearing and I have no idea why this is happening.
(and it stays like this even when I zoom back to default)
any ideas?
this is the url if you want to try it yourself
http://www.facegift.co.il/canvas/?userItemId=17887&sc=987404&print=1&width=1500&pageNum=7
This is not a bug in Chrome. This is a bug in your page.
All the id attributes on the page have to be unique. But on your page, they are not.
The <linearGradient> for that botanical flourish has the id "SVGID_2_". There is also a <clipPath> element on the page with id="SVGID_2_".
Fix that problem (and any other duplicate ids) and I am certain things will start working.
Then you should also delete your Chrome bug report.
I had a very similar issue in Chrome because one of the elemets had the transform attribute:
transform="translate(0,-9000000000)"
And it made Chrome go crazy. The solution was to hide or remove the element.
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
There is an anchor in one of my websites.
http://www.autostitkok.hu/tozsde3.html#jelentkezes
Firefox 3.6.8 doesn't "stop" at the anchor if I use an anchored link, but rolls down to the bottom of the page.
If I click into the address bar of the browser, and hit enter, the browser jumps to the right place, but obviously this isn't the way it supposed to work...
I asked other users and they have the same experience with this link on this site, so the problem can't be my computer.
Other browsers work properly.
I tried Opera, Google Chrome, and IE8.
Thank you,
Gabor
Searching on Google suggests that the name attribute is deprecated for links. You might want to try using the id attribute (<a id="jelentkezes">)instead.
If that does not work, I think looking into the HTML validation errors would a reasonable next step.