in HTML5 the iframe has new attributes like 'seamless' that should remove borders and scrollbars. I've tried it but doesn't seem to work, I still can see scrollbars and borders (I'm using Google Chrome as browser), Here's my code:
<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>
Any idea why it's not working?
One more question, is it possible to target a specific section of the page inside the iframe?
Updated: October 2016
The seamless attribute no longer exists. It was originally pitched to be included in the first HTML5 spec, but subsequently dropped. An unrelated attribute of the same name made a brief cameo in the HTML5.1 draft, but that too was ditched mid-2016:
So I think the gist of it all both from the implementor side and the web-dev side is that seamless as-specced doesn’t seem to be what anybody wanted to begin with. Or at least it’s more than anybody actually wanted. And anyway like #annevk says, it’s seems a lot of it’s since been “overcome by events” in light of Shadow DOM.
In other words: purge the seamless attribute from your memory, and pretend it never existed.
For posterity's sake, here's my original answer from five years ago:
Original answer: April 2011
The attribute is in draft mode at the moment. For that reason, none of the current browsers are supporting it yet (as the implementation is subject to change). In the meantime, it's best just to use CSS to strip the borders/scrollbars from the iframe:
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
There's more to the seamless attribute than what can be added with CSS: part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe (acting as though the embedded document was one big nested inside the element, for example).
Lastly, versions of Internet Explorer (8 and earlier) require additional attributes in order to remove the borders, scrollbars and background colour:
<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>
Naturally, this doesn't validate. So it's up to you how to handle it. My (picky) approach would be to sniff the agent string and add the attributes for IE versions earlier than 9.
According to the latest W3C HTML5 recommendation (which is likely to be the final HTML5 standard) published today, there is no seamless attribute in the iframe element anymore. It seems to have been removed somewhere in the standardization process.
According to caniuse.com no major browser does support this attribute (anymore), so you probably shouldn't use it.
It's not supported correctly yet.
Chrome 31 (and possibly an earlier version) supports some parts of the attribute, but it is not fully supported.
It is possible to use the semless attribute right now, here i found a german article http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html
and here are another presentation about this topic: http://benvinegar.github.com/seamless-talk/
You have to use the window.postMessage method to communicate between the parent and the iframe.
I thought this might be useful to someone:
in chrome version 32, a 2-pixels border automatically appears around iframes without the seamless attribute.
It can be easily removed by adding this CSS rule:
iframe:not([seamless]) { border:none; }
Chrome uses the same selector with these default user-agent styles:
iframe:not([seamless]) {
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
iO8 has removed support for the iframe seamless attribute.
Tested in Safari, HomeScreen, new WKWebView and UIWebView.
Full Details and performance review of other iOS 8 changes:
iOS8 changes on Cordova mailing list
Sencha.com Blog : Apple Shows Love for HTML5 with iOS 8
You only need to write
seamless
in your code. There is not need for:
seamless ="seamless"
I just found this out myself.
EDIT - this does not remove scrollbars. Strangely
scrolling="no"
still seems to work in html5. I have tried using the overflow function with an inline style as recommended by html5 but this doesn't work for me.
Use the frameborder attribute on your iframe and set it to frameborder="0" . That produces the seamless look. Now you maybe saying I want the nested iframe to control rather I have scroll bars. Then you need to whip up a JavaScript script file that calculates height minus any headers and set the height. Debounce is javascript plugin needed to make sure resize works appropriately in older browsers and sometimes chrome. That will get you in the right direction.
Still at 2014 seamless iframe is not fully supported by all of the major browsers, so you should look for an alternative solution.
By January 2014 seamless iframe is still not supported for Firefox neither IE 11, and it's supported by Chrome, Safari and Opera (the webkit version)
If you wanna check this and more supported options in detail, the HTML5 test site would be a good option:
http://html5test.com/results/desktop.html
You can check different platforms, at the score section you can click every browser and see what's supported and what's not.
I couldn't find anything that met my requirements, hece I came up with this script (depends on jQuery):
https://gist.github.com/invernizzie/95182de86ea9dc5daa80
It will resize the iframe to the viewport size (taking into account wider content).
It could use an improvement to use the viewport height instead of the content height, in the case that the former is bigger.
Related
I have a little website, and I wanted to have no margin by doing:
<p id="demo" style="margin-block-start:0em;margin-block-end:0em"></p>
But the object still has a margin on every browser except chrome. (Chrome on IOS also does not work)
What have I done wrong? I have seen some other problems that were related to some small typos, but I can't find any of that here.
Quite simply (at the time of writing), this is a CSS Logical Properties and Values Level 1 experimental property and is not supported by most browsers or is supported but behind an "experimental" flag which is set at an individual user level.
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
MDN
I would suggest a fallback of margin:0 pending final acceptance.
Independent composition doesn't seem to work for the rendering process of my video. My ads are broken too. They remain black and give an error:
Independent composition is disabled for video rendering. This can
negatively impact performance
I'm using the GoogleIMA SDK.
From MSDN:
The HTML5 video tag is an element that is explicitly targeted for
independent composition. Independently rendering and composing HTML5
video enables a fast and smooth media playback experience.
I don't know why this doesn't work, is this a bug?
I'm not sure if it's a bug or intentionally done this way (Not sure since it's pretty weird that video gets dropped from independent rendering).
But i do know how to fix this. The way to fix it is to look for CSS animations/transforms on the <video> element. These are usually suspect of a <video> element being kicked out of independent rendering.
Hope this helps!
For those that wandered in from a Google search like I did, but the marked answer does not solve your issue
If there are no animations on your <video> element, but you are still getting this error, make sure you don't have the
transform-style: preserve-3d;
property in the style it may also break Edge, with the solution being to remove this property or to pray that Edge goes away some-time soon.
I am reading my HTML book and it states that iframe's scrolling and frameborder attributes are not supported in HTML5. The following code is declared in the book:
<iframe
src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed"
width="450"
height="350"
frameborder="0"
scrolling="no">
</iframe>
How comes the frameborder still works, if HTML5 does not support frameborder? If I don't put in that frameborder="0" line, the browsers load it with a frame around the image, while the frameborder="0" line takes out the frame. I thought this attribute is not supported in HTML5?
At the same time, scrolling seems to obey the rule of it not being supported in HTML5, as that line makes no difference at all (whether i set it to 0 or 1). The scrollbar is not shown either.
I am learning HTML at the moment, but this is so bizarre to me. Can someone help clarify this for me by any chance? I tested this in both Firefox and Chrome.
The book has got it wrong. Specifications (or, in this case, draft specifications) do not “support” elements or attributes; browsers do. Specifications define elements and attributes, and they present conformance clauses that say that conforming browsers must support elements and attributes so-and-so. This generally does not exclude the possibility that conforming browsers support other elements and attributes as well. Besides, browsers may be non-conforming; in fact, there is probably no browser that conforms to any HTML specification or draft, strictly speaking (though the conformance might be “good enough”).
In the case of frameborder and HTML5, the HTML5 Proposed Recommendation specifies that browsers are expected to support the attribute. Clause 10.4.3 Attributes for embedded content and images says that certain CSS rules “ are expected to apply as presentational hints”, and they include the following:
iframe[frameborder=0], iframe[frameborder=no i] { border: none; }
This means that if an iframe element has the frameborder attribute with the value 0 or no (case insensitively), this corresponds to the CSS setting border: none on that element (defined to have specificity 0, so any explicit CSS setting of border on the element overrides it).
If this sounds odd, see section Conformance requirements. HTML5 has double standards, in the sense that it prohibits authors/document from using some constructs and yet requires or recommends browsers (and other user agents) to support them. So if you use frameborder, your document is non-conforming. Yet it is “expected” to be supported in a specific way.
The situation is in principle similar with the scrolling attribute. Its expected effect is that values on, scroll, and yes cause scrolling bars (like overflow: scroll), values off, noscroll, and no prevent scroll bars; and value auto causes scrollbars when content does not fit (the default). However, none of Firefox, Chrome, IE seems to support the values that cause scrolling bars unconditionally, and only Firefox supports all of the values that prevent them, whereas Chrome and IE support just no.
This is understandable in the sense that scrolling=no is the attribute that browsers have traditionally supported. The other values are more or less an invention in the HTML5 draft, probably supposed to cover some values actually in use or supported.
The bottom line with this is that scrolling=no works. To cause scrollbars even when not needed for the content, scrolling=yes is not useful in practice (the corresponding CSS setting works).
The frameborder attribute is not supported in HTML5. Use CSS
instead.
The frameborder attribute specifies whether or not to display a border
around an .
Tip: It may be better to NOT specify a frameborder, and use CSS to
apply borders instead.
http://www.w3schools.com/tags/att_iframe_frameborder.asp
HTML5 and frameborder
HTML5 : Iframe No scrolling?
http://www.maxdesign.com.au/2011/03/10/iframe-scrollbars-and-html5/
How comes the frameborder still works, if HTML5 does not support frameborder?
Because HTML 4 defines frameborder and browsers haven't stopped supporting it.
You should still use CSS instead though.
I need to hide the full screen button of the video tag in HTML5.
Is there any way to achieve it ?
Thanks.
I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure.
Simple webkit browser (chrome on windows) specific solution
The following solution is webkit specific
video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
Here is the fiddle for it.
Warning:
This will not work on browsers who have a rendering engine other than webkit e.g. Firefox or Internet Explorer, or obsolete versions of Opera that had Blink/Presto.
This may not work with implementations of webkit browsers in Operating systems other than windows e.g. Safari on macOS.
Update:
After multiple readers complained that the aforementioned solution did not work for certain browsers, I'm updating the answer.
Taking care of Vendor specific implementations:
The above solution is -webkit- browser specific and was tested in Chrome on Windows.
The implementation of shadow DOM hasn't been standardized, and therefore, may vary from one browser vendor to another.
Almost all browsers today have great developer tools, but some features are intentionally locked, but can be opened with a little effort, for instance, in Firefox most such configurations can be accessed in the about:config page.
Developers are advised to unlock the shadow DOM features in their browser.
Then, they can inspect the <video> component
How to enable shadow DOM selection in Chrome
Go to Chrome > Developer Tools > Settings (gear icon)
Under Elements look for Show user agent shadow DOM option
Check (select) the box
You'll be able to inspect the underlying shadow DOM
Observe their respective styling
You will notice that they're similar to pseudo class selectors
Some unsolicited free advise for Hiding the full screen button of the video tag in HTML5
Finding the solution can be as easy as writing CSS with pseudo class selectors
But like every other CSS, it might require a lot of trial-n-error
And you might undergo a lot of frustration to make it work
But always remember, it's worth it.
Additionally, as #paulitto suggests, DOM methods can be implemented after removing controls attribute from <video> element. Refer this tutorial for more.
You need just to write this code in your css:
video::-webkit-media-controls-fullscreen-button {
display: none;
}
And the fulscreen button will hide
You can disable the fullscreen button using the controlsList="nofullscreen" attribute
Supported Browsers: Chrome, Edge, Edge Beta. It doesn't work with Firefox.
Refer the fiddle
Attribute values:
controlsList="nodownload nofullscreen noremoteplayback"
You must have controls attribute in <video> tag to get the features of controlsList.
Reference Page
I think you are not able to do that without hiding all the controls.
You can use its dom methods to implement your own controls and design them to look exactly the same as built in controls
Or you can also use external html5 video plugins to implement this
You can write your custom code for controls
eg. For changing video time use below code
document.getElementsByTagName('video')[0].currentTime=10;
Below link provides all necessary examples to do manual controls on video with javascript
HTML5 Video Events and API
For the purpose of rapid coding and reducing tedium, I want to know if it's possible to auto-generate the contents of an HTML anchor as its href value without using JavaScript. The application I'll be using this in has pages large enough for a JavaScript solution to introduce significant lag.
Example:
Is this possible? Is it W3C-compliant? Why or why not?
Yes, to an extent. You can use the CSS2 content property and its attr value to get the value of an anchor's href attribute. For instance:
<style>
.autofill:after {
content: attr(href);
}
</style>
http://jsfiddle.net/aA4Em/2/
This is not guaranteed to work cross-browser! For instance, in the current version of WebKit (Safari, Chrome, Yandex, Rockmelt, many mobile browsers, etc.), the link text is rendered, but it cannot be clicked. That said, it works as you might expect in the currently most-used versions of Presto (Opera, soon to be replaced by WebKit), Trident (Internet Explorer), and Gecko (Firefox, Waterfox, etc.).
Mind you I don't know if this is W3C-compliant or not (I don't even know if an empty anchor is W3C-compliant), so my answer is definitely to use this solution at your own risk.
Update
As of this edit (2013-04-30), Google's Chromium platform's flavor of Webkit (Chrome, Yandex, Rockmelt, many mobile browsers, etc.) and Blink (Currently just Chrome Canary) now allows users to click anchor pseudo-elements. Safari, which still runs on Apple's flavor of WebKit, still does not allow this.