Boostrap tab with iframe map/youtube problem solve

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs" id="myTabs">
                <li class="active"><a href="#home" data-toggle="tab">Home</a>
                </li>
                <li><a href="#mps" data-toggle="tab">Google Maps</a>
                </li>
                <li><a href="#ytb" data-toggle="tab">YouTube</a>
                </li>
                <li><a href="#rn" data-toggle="tab">Antwon</a>
                </li>
            </ul>
            <div class="tab-content">



                <div class="tab-pane active" id="mps" data-src="https://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=moskow&amp;aq=&amp;sll=49.60804,10.807114&amp;sspn=0.40491,1.056747&amp;ie=UTF8&amp;hq=&amp;hnear=Moskau,+gorod+Moskva,+Russland&amp;ll=55.755826,37.6173&amp;spn=0.175821,0.528374&amp;t=m&amp;z=12&amp;output=embed"><br><small><a href="https://maps.google.de/maps?f=q&amp;source=embed&amp;hl=de&amp;geocode=&amp;q=moskow&amp;aq=&amp;sll=49.60804,10.807114&amp;sspn=0.40491,1.056747&amp;ie=UTF8&amp;hq=&amp;hnear=Moskau,+gorod+Moskva,+Russland&amp;ll=55.755826,37.6173&amp;spn=0.175821,0.528374&amp;t=m&amp;z=12" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small>"&gt;
                    <iframe src="" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                </div>

                <div class="tab-pane" id="ytb" data-src="http://www.youtube.com/embed/dQBzT3XBwzU">
                    <iframe src="" width="560" height="315" frameborder="0" allowfullscreen="allowFullScreen"></iframe>
                </div>


                <div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
                    <iframe src="" width="500" height="203" frameborder="0" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowFullScreen"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>


$('#myTabs').click('show', function(e) {
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if($(paneID+" iframe").attr("src")=="")
    {
        $(paneID+" iframe").attr("src",src);
    }
});

// dynamic by ACF repeater
-------------------------------
<ul class="nav nav-tabs" id="myTabs">
<?php
							$main_field = get_field('map_area', 'option');
							$first_title = $main_field[0]['map_title'];
							$first_link = $main_field[0]['map_address_code'];
							//print_r($first_title);

							if(get_field('map_area', 'option')): $st = 1;
		while(has_sub_field('map_area', 'option')):
						if ($st == 1){	?>
<li class="active"><a href="#home" data-toggle="tab"><?php echo $first_title?></a> </li>
		 <?php }else {?>
			 <li><a href="#tab<?php echo $st; ?>" data-toggle="tab"><?php the_sub_field('map_title'); ?></a>  </li>
	<?php } $st++;  endwhile;   endif; ?>

</select>
						<div class="tab-content">
							<?php if(get_field('map_area', 'option')):
							$i = 1;
							while(has_sub_field('map_area', 'option')):
				//$class = $i == 1 ? ' active' : '';
				if ($i == 1){?>

<div class="tab-pane  active" id="tab1" data-src="<?php echo $first_link;?>">
<iframe class="googl_mapnachman" src="<?php echo $first_link;?>" width="100%" height="550" frameborder="0" allowfullscreen="allowFullScreen"></iframe>
</div>
  <?php }else {?>
 <div class="tab-pane" id="tab<?php echo $i; ?>" data-src="<?php the_sub_field('map_address_code'); ?>">
<iframe class="googl_mapnachman" src="" width="100%" height="550" frameborder="0" allowfullscreen="allowFullScreen"></iframe>
</div>
	 <?php } $i++;

                endwhile;   endif; ?>


						</div>