Jquery ui tabs load iframe only when clicked

Question

Sorry for my English, I use google translator. I have a code in jQuery UI tabs with iFrame loads contents only when clicked. I Use PHP (wordpress) to call the iframe.

The problem is it only works with an iframe src putting data in, for example:

< iframe data-src = " http://powvideo.net/embed-ui0njh4t1cgz-640x360.html " width = "680" height = "380" scrolling = "no" frameborder = "0"> (IF it works)

The hosting of the embed video delivered as follows:

< iframe src = " http://powvideo.net/embed-ui0njh4t1cgz-640x360.html " width = "680" height = "380" scrolling = "no" frameborder = "0"> (NOT working)

Anyone know if you can modify the script or php to put the correct syntax? Change iframe data-src= by iframe src=

Many thanks in advance.

Code jquery ui:

<script>
   $(function() {      
      $( "#tabs" ).tabs({
 beforeActivate: function( event, ui ) {
  ui.newPanel.find('iframe').each(function() { if($(this).data('src') && !$(this).attr('src')) $(this).attr('src',$(this).data('src')); });
 },
 create: function( event, ui ) {
  ui.panel.find('iframe').each(function() { if($(this).data('src')) $(this).attr('src',$(this).data('src')); });
 }
});      
      // Hover states on the static widgets
      $( "#dialog-link, #icons li" ).hover(
         function() {
            $( this ).addClass( "ui-state-hover" );
     },
     function() {
        $( this ).removeClass( "ui-state-hover" );
     }
  );
});
 </script>

Code Html

<div id="tabs">
 <ul>      
  <li><a href="#tabs-1">Opción 1</a></li>
 </ul>

 <div id="tabs-1">
  <?php $values = get_post_custom_values("reproductor"); echo $values[0]; ?>
 </div>
</div>

Answer 1

If I understand you correctly, the problem is that the iframe needs to have a data-src attribute, not a src attribute, that contains the url for the iframe. This can be accomplished by changing this:

$(this).attr('src',$(this).data('src'));

to this:

$(this).attr('data-src',$(this).data('src'));