This demo shows the "Set Iframe height by ratio (iframe_height_ratio)" feature which only available in the free and the pro version of the advanced iframe.
This can be used to make responsive iframes where the content has a certain ratio like YouTube videos. It does work cross domain!
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.
Since v2022 you can also define the ratio in a more natural way: before 0,5625 - now: 16:9
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="https://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="16:9" enable_lazy_load="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="0" allowfullscreen="true" allow="autoplay; encrypted-media"]
Example: Responsive p3d models
This feature can be also used to include everything that scales based on a ratio.
Advanced iFrame now has out of the box support for embedded 3D models using the p3d 3D viewer. Go to https://p3d.in/b/24 and download a pre-configured plugin where the model does scale already nicely on all devices. Get started for free! If you need more storage or access to the Premium features of p3d.in, you can get a 50% discount on your first payment with the coupon AIFRAME on checkout.
And the shortcode which is used is:
[advanced_iframe securitykey="da39a3ee5e6b4b0d3255bfef95601890afd80709" use_shortcode_attributes_only="true" src="https://p3d.in/e/uvQ7g+border-hidden+load" id="example22_2" height="1000" width="100%" enable_responsive_iframe="true" iframe_height_ratio="1:1" enable_lazy_load="true" enable_lazy_load_threshold="200"]
Have fun using Advanced iFrame Pro,
Michael