Force responsive iframe (Videos & content)

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

Although we recommend using

and
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
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *