Force responsive iframe (Videos & content)

The tip is optional. The issue has been resolved in WPLMS 2.0.1 update.

Although we recommend using [iframe] and [iframevideo] shortcode around iframes. In case you’ve forgotten to add it. Below code will force all iframes to become responsive. Make sure the iframes you embed have a height and width attribute.

Add below code in Child theme – functions.php

add_action('wp_footer','iframe_responsive_videos_wplms',99);
function iframe_responsive_videos_wplms(){
?><script>
(function ($) {
iframeaspectRatio = function () {
var video = $('iframe');
var w = video.attr('width');
var h = video.attr('height');
// This is the part that does the hard work:
// height divided by width to calculate the ratio as a fraction,
// multiply by 100 and concatenate a % sign.
var ratio = ((h/w) * 100).toFixed(2) + "%";
$('iframe').css('width','100%');
var height = $('iframe').width() * (h/w);
$('iframe').css('height',height+'px');
}
})(jQuery);
 
jQuery(document).ready(function(){
iframeaspectRatio();
$('.unit_content').on('unit_traverse',function(){iframeaspectRatio();});
});</script>
<?php
}

 

Was this article helpful?

Related Articles

Leave A Comment?