streaming-website
streaming-website copied to clipboard
Embed-Tab: iframe contains invalid attributes
iframe tag to embed streams uses invalid/unsupported attributes "frameborder", "allowfullscreen", "seamless" and "scrolling", which could lead to unexpected behavior of browsers.
They might be invalid per spec but they are interpreted by browsers and indeed necessary to provide the required user experience.
For example Mozilla based browsers will not allow iframes to open a fullscreen-view for iw. a Video-Player, without the fullscreen-Attribute (See MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen or even MSDN: https://msdn.microsoft.com/de-de/library/dn312070(v=vs.85).aspx and this SO-Post for an overview of browser Support: http://stackoverflow.com/questions/18113909/how-widely-supported-is-the-iframe-attribute-allowfullscreen)
I think overall we can still do better:
-
allowfullscreen
is standard and widely supported, no reason for dropping it -
seamless
apparently has absolutely no browser support, and has been dropped from the spec for that reason https://github.com/whatwg/html/issues/331 -
frameborder
andscolling
have both been removed in favour of CSS, if possible we should move in that direction too -
scrolling="no"
doesn't seem that sensible anyway. Unless the content is too large, scrollbars are not shown. Setting it will only cause a bug to manifest in clipped content instead of visible scrollbars.
My (untested) suggestion would be:
<iframe src="{url}" width="1024" height="576" allowfullscreen="allowfullscreen" style="border: none"></iframe>
Apparently frameborder="none"
does not even work in Firefox, it still draws borders. The spec allowed 0
and 1
as values.
I've successfully tested the following in Firefox and Chrome:
<iframe src="{url}" allowfullscreen="allowfullscreen" style="border:none;width:1024px;height:576px"></iframe>
It appears to yield the same result as the original (except it removes borders in Firefox).