Skip to content

Instantly share code, notes, and snippets.

@nfreear
Created November 14, 2012 16:36
Show Gist options
  • Select an option

  • Save nfreear/4073176 to your computer and use it in GitHub Desktop.

Select an option

Save nfreear/4073176 to your computer and use it in GitHub Desktop.
Test of <iframe> width=100% using YouTube
<!doctype html><meta charset=utf-8 /><title>*iframe width=100% test</title>
<style>
.region-0{ width:420px; border:1px solid #ccc; padding:.5em; }
iframe{ overflow:hidden; border:none; min-width:240px; }
</style>
<div class=region-0>
<h1>iframe width=100%</h1>
<p>Some text before..
<p><iframe
width="100%" data-X-width="420" height="315"
src="http://www.youtube.com/embed/lD6jmQxBa4s?fs=1"
frameborder="0" allowfullscreen
>
</iframe>
<p>Some text after..
</div>
<pre>
NDF, 12-13 Nov 2012.
* <a href="http://validator.w3.org/check?uri=referer" target=_blank>Validate - new window</a>.
* http://youtu.be/lD6jmQxBa4s
* http://whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element
* http://whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#attr-dim-width
* http://whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-non-negative-integer
Support for width="100%"
* Valid HTML5 -- NO,
* Google Chrome 23, Firefox 16, Opera 12, Win/Safari 5.1, MSIE 8, MSIE 9 -- YES,
* IETester: MSIE 6, MSIE 7 (http://www.my-debugbar.com/ietester/?version=0.4.11) - YES.
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment