Is there a method to creating an entirely responsive iframe experience?
I'm having an issue with setting the height (or not setting it, as the case may be), like:
<iframe style="width:100%" src="http://player.ooyala.com/iframe.html?ec=RoN2prZDE61jdLvNrRZUOJFKv4xcAnGs&pbid=858dc167a9894974a40d4d..."frameborder="0" allowfullscreen> </iframe>
The iframe defaults to a short height, but the width does stretch 100% as expected. I'm trying not to have to explicitly set the width or height.
I have run a couple of tests on my side and I found that for creating a responsive iframe you have to set both width and height as a percentage in order for it to function properly. Please see my example below:
http://player.ooyala.com/static/v4/stable/4.16.8/skin-plugin/iframe.html?ec=5wa251NDE6Fi4l8A0r-9QwN-KvERqZPE&pbid=457546008d71423db49122cd0c58aec9&pcode=lwd2UyOvDgwuRo-SL-ykKdpTsDiX" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""" style='width:100%; height:100%;'></iframe>
A functional page can be found here:
Cheers, hope this helps!