Responsive videos

This demo shows the "Set Iframe height by ratio (iframe_height_ratio)" feature which only available in the pro version of the advanced iframe.

This can be used to make resonsive iframes where the content has a certain ratio like swf's, videos. It does work cross domain!

As you have already noticed this example page has a different theme as the rest of the page. I use the theme "Twenty Twelve" which is a default theme of WordPress together with "jonradio Multiple Themes". I really has big paddings but shows the responsive iframes very well.

Example 22: Responsive video iframes

Videos have a certain ratio. So it is possible to calculate the correct height if the width is set. Advanced iframe Pro does calculate the height if you e.g. make a width of 100% for the iframe. The height is calculated when the page is loaded and also when the page is resized. The example below shows a video from the band Kosmonautenfish from a friend of mine. The black bar on the top and bottom is part of the video! This feature also uses lazy loading.

If you include youtube videos please make sure to use this url pattern to embed videos:
//www.youtube.com/embed/<videoid>?autoplay=1

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.youtube.com/embed/8ptFg_Hku0o?autoplay=1" id="example22" height="300" width="100%" hide_elements="#secondary" content_id="#primary" content_styles="width:100%"  enable_responsive_iframe="true" iframe_height_ratio="0.5625" enable_lazy_load="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="0" allowfullscreen="true"]

Have fun using Advanced iFrame Pro,

Michael