Załadowanie wartości po kliknięciu

Witam mam na stronie dodany przycisk po którego kliknięciu otwiera się tabela z playerem w iframe. Mój problem polega na tym że zawartość tej tabeli ładuje się jeszcze przed kliknięciem w przycisk i video leci przed rozwinięciem tabeli(nie mogę tego zmienić w playerze bo filmiki nie stoją na mojej stronie tylko są z neta), chciałbym zrobić aby zawartość tabeli ładowała się dopiero po kliknięciu.

Oto kod :

<div id="bgfilms">
<center> 
[xfgiven_film]<iframe width="640" height="360" src="[xfvalue_film]" frameborder="0" allowfullscreen></iframe>[/xfgiven_film]
[xfgiven_filmvk]<iframe src="[xfvalue_filmvk]" width="607" height="360" frameborder="0"></iframe>[/xfgiven_filmvk]
</center>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      <span style="margin:10px" class="btn btn-warning full-width" rel="tooltip" onclick="$('#bgfilms').slideToggle();return false;"><i class="icon-play"></i> Oglądaj Online</span>
      <div class="head-movie">
        <img class="click-img" src="[xfvalue_image]" height="400" width="270" />

      </div>

 

Kod CSS:

#bgfilms{
	padding-top: 15px;
	display:none;
	background-image: url("../images/bgfilms.png");
	height: 500px;
	margin:10px -50%;
	margin-bottom:20px;
	outline: 5px solid rgba(0, 0, 0, 0.5)
}

Cały plik style.css:

http://jsbin.com/juriv/1/edit

 

 

Będę bardzo wdzięczny za pomoc

Rozwiązanie może być zamiast użycie .toogle() i uwidocznienie elementu użycie metody .load i dodanie tego kawałka html do strony w momencie kliknięcia w przycisk.

lub metody $(’#bgfilms’).html(’

<center>

po pierwsze

<center> ... </center>

nie używaj takich dziwnych reliktów przeszłości

 

po drugie przeczytaj co to jest $.load albo $.ajax

 

po trzecie masz to wstawić w onlick, co też jest bez sensu bo powinieneś dołączyć osobny plik ze skryptami

 

po czwarte, widzę że masz tutaj tw-bootstrap więc możesz sobie ten filmik w ładnego modala wrzucić