Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

Dynamically set iframe properties with jQuery

David Carr

Demos Javascript HTML Tutorials

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


    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="" 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'>


    Laravel Modules Book by David Carr

    Help support the blog so that I can continue creating new content!

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

    © 2009 - 2022 DC Blog. All code MIT license. All rights reserved.