Load content with bootstrap Modal

[hell hansen]

Hi Guys, Happy new year for everybody.

Look i'm trying to achive a goal to load iframe on bootstrap modal dinamical.
Like i just want the iframe src be called just when modal is opened.
Because the src url is coming from database, and in some page there more than 30 records.
it mean 30 iframes inside of page, and it making the page slawly.

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if ($_REQUEST['id'] == 17 || $_REQUEST['id'] == 19) {
    $pages = $db_handle->runQuery("SELECT it.item_id, it.item,it.url_demo, cm.media_filename,it.offering_id,off.offering_id,off.affiliate_id,aff.affiliate_id
    FROM affiliate as aff
    join offering as off
    ON off.affiliate_id = aff.affiliate_id
    INNER JOIN item AS it 
    INNER JOIN item_media AS im 
    ON it.item_id= im.item_id AND it.offering_id = off.offering_id
    INNER JOIN cms_media AS cm 
    ON im.media_id=cm.media_id 
    WHERE it.it_dashboard=1 AND aff.affiliate_id =" . $_REQUEST['id']);
} elseif ($_REQUEST['id'] == 2017) {
    $pages = $db_handle->runQuery("SELECT it.item_id, it.item,it.url_demo, cm.media_filename
    FROM item AS it 
    INNER JOIN item_media AS im 
    ON it.item_id= im.item_id 
    INNER JOIN cms_media AS cm 
    ON im.media_id=cm.media_id 
    WHERE it.it_dashboard=1");
} elseif ($_REQUEST['id'] == 101) {
    $pages = $db_handle->runQuery("SELECT it.item_id, it.item,it.url_demo, cm.media_filename
    FROM item AS it 
    INNER JOIN item_media AS im 
    ON it.item_id= im.item_id 
    INNER JOIN cms_media AS cm 
    ON im.media_id=cm.media_id 
    WHERE it.it_dashboard=1 ORDER BY it.item_id DESC LIMIT 20");
}
$uid = 1;
foreach ($pages as $row) {

    // echo $row['media_filename'];
    echo $d = <<< EOT
    <div class="col-lg-2 col-sm-3 col-xs-4"> <a title="{$row['item_id']}" href="#"> <a href="#"  data-toggle="modal" data-target="#largeModal{$uid}"><img class="thumbnail img-responsive" src="http://mydomain.com/cms/modules/media/uploads/original/{$row['media_filename']}"></a> </a></div> <div class="modal fade" id="largeModal{$uid}" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Large Modal</h4> </div> <div class="modal-body" style="color:#000;"> <iframe allowtransparency="true" src="{$row['url_demo']}"  scrolling="no" frameborder="no" style="border-width:0; width: 100%;height: 600px"></iframe> </div> <div class="modal-footer"> <a class="btn btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-heart-empty" title="add to my favorites list"></span></a> <button type="button" class="btn btn-danger">Close</button> </div> </div> </div> </div>
EOT;
    $uid = $uid + 1; //increase uid
}
?>

There everything working fine, what i just want is replace this line
<iframe allowtransparency="true" src="**{$row['url_demo']}**" scrolling="no" frameborder="no" style="border-width:0; width: 100%;height: 600px"></iframe> the variable $row['url_demo'] to be called only when modal is loaded.
Thanks and hope get reply soon from you guys.