Responsive Video, Internet Explorer, 100% width/height
OK, for some time I have been experimenting with responsive video using JWPlayer in a Wordpress setting (using a plugin to allow direct coding of HTML) and I am very close to getting what I want. I have experimented with Fitvids (http://fitvidsjs.com/) but I prefer a non-iframe manual implementation of the same kind of approach outlined in several places on the web. Specifically, I have used & modified code from http://www.hexagonwebworks.com/2011/making-videos-responsive/ & http://webdesignerwall.com/tutorials/css-elastic-videos (based on code from http://www.tjkdesign.com/articles/how-to-resize-videos-on-the-fly.asp). Thanks to all of those.
Basically, these define a flexible "wrapper" which contains a max width/height player. This seems to work with most of the important browsers, with the exception of Internet Explorer 8 - I haven't looked at it for IE9 but assume that if I get it right for IE8, the rest should fall in to place !
If I specify bc.. width: 100%, height:100%,
... in IE I just get a gap where the player should be - not the text between the DIVs for the media player, just a big hole, so it's obviously trying to put something out there.
The browser has the latest Flash upgrades and is running on Windows 7 pro. My code tries to get the browser to use HTML5 & provides mp4 & webm files, but for IE8, it should fall back to Flash. If I code a specific width, the gap is filled, but that ruins the responsiveness :-(
Here's a demo of 100%: http://tinyurl.com/78qjxxo
This is of a hard-coded 480x270: http://tinyurl.com/8a5n88m
So my questions are these:
1. Am I missing something in terms of telling Flash to use 100% of what contains it if it is invoked ?
2. If not, why does *width: 100%, height:100%* throw things ? Is there another way of doing this ?
I am probably missing something simple, so what is it ?
I don't want to get in to SWObject, etc. But although IE is less important than it was, it's still _very_ ! So if anybody has any suggestions, I'd be happy to hear them.