streaming-website icon indicating copy to clipboard operation
streaming-website copied to clipboard

Embed-Tab: iframe contains invalid attributes

Open Kunsi opened this issue 8 years ago • 3 comments

iframe tag to embed streams uses invalid/unsupported attributes "frameborder", "allowfullscreen", "seamless" and "scrolling", which could lead to unexpected behavior of browsers.

Kunsi avatar Dec 09 '16 12:12 Kunsi

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)

MaZderMind avatar Dec 10 '16 10:12 MaZderMind

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 and scolling 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>

Florob avatar Dec 10 '16 17:12 Florob

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).

Florob avatar Dec 28 '16 16:12 Florob