Dynamically set iframe properties with jQuery

Using jQuery it’s possible to pass properties to set the src, width and height of an iframe from a series of links. 

Demo: https://demos.dcblog.dev/dynamically-set-iframe-properties/

Give the links a class for jQuery to read and set data properties, you can call these anything but using the named properties makes sense so set data-src, data-width and data-height. 

<a class="item" data-src="http://domain.com" data-height="350" data-width="100%">Link</a>

Next the jquery (this snippet assumes you’ve already included jquery).

Looking for click events the class item is looked for then the data attributes are collected by using $(this).att(data-src) the data-src must match what’s set in the link, in the below snippet the width and height has a set value for cases where no width and height has been set.

Then the iframe inside #itemcontent is identified and the properties are applied.

$('a.item').on('click', function(e) {
  var src = $(this).attr('data-src');
  var height = $(this).attr('data-height') || 300;
  var width = $(this).attr('data-width') || 400;
  $("#itemcontent iframe").attr({'src':src,'height': height,'width': width});
});

Finally have the div with an iframe.

<div id='itemcontent'>
    <iframe></iframe>
</div>