If you don't find an answer, please click here to post your question.
Reply
Trusted Contributor
Posts: 136
Registered: ‎10-09-2012

Responsive iframe embed?

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.

 

Thanks!

 

JT

Ooyalan
Posts: 11
Registered: ‎01-17-2017

Re: Responsive iframe embed?

Hello John,

 

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:

 

<iframe src="
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:

 

jlopeztest.000webhostapp.com

 

Cheers, hope this helps!

-Alfredo.