Im hoping somebody can help me out with this.
I have a webpage that has 6 buttons. each button opens a jquery modal box which contains an iframe. the iframe is loading an external video that is set to auto start.
when I load the main html page in the browser, all 6 videos seem to be loading in the background in each of their iframes because you can hear the sound of all 6 videos playing at the same time even thought each modal hasn't been executed yet.
Is there a way to adjust my jquery code so that the iframe wont load in the background until the modal is executed
? also, is there a code to asure that once the modal is closed out, the iframe is unloaded
?
**the reason that I used iframes to load the 6 videos int he video players is that it was too buggy and was causing compatibility issues with other scripts running on the main page. so I call each video in a separate iframe html page. much cleaner and the video itself has no seo value so it doesn't bother me much. This is one of those instances where an iframe is useful.
I was thinking maybe some way of implementing iframe display none until modal opens? this is my jquery:
Code:
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(700);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(800);
});
$('.window #closeout').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mediaplayer').remove();
$('#mask').hide();
$('.window').hide();
window.location = window.location;
});
$('.window #closeout2').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mediaplayer2').remove();
$('#mask').hide();
$('.window').hide();
window.location = window.location;
});
$('.window #closeout3').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mediaplayer3').remove();
$('#mask').hide();
$('.window').hide();
window.location = window.location;
});
$('.window #closeout4').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mediaplayer4').remove();
$('#mask').hide();
$('.window').hide();
window.location = window.location;
});
$('.window #closeout5').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mediaplayer5').remove();
$('#mask').hide();
$('.window').hide();
window.location = window.location;
});
$('.window #closeout6').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mediaplayer6').remove();
$('#mask').hide();
$('.window').hide();
window.location = window.location;
});
$(window).resize(function() {
resizeUI();
});
});
function resizeUI() {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$('#dialog1').css('top', winH/2-$('#dialog1').height()/2);
$('#dialog1').css('left', winW/2-$('#dialog1').width()/2);
$('#dialog2').css('top', winH/2-$('#dialog2').height()/2);
$('#dialog2').css('left', winW/2-$('#dialog2').width()/2);
$('#dialog3').css('top', winH/2-$('#dialog3').height()/2);
$('#dialog3').css('left', winW/2-$('#dialog3').width()/2);
$('#dialog4').css('top', winH/2-$('#dialog4').height()/2);
$('#dialog4').css('left', winW/2-$('#dialog4').width()/2);
$('#dialog5').css('top', winH/2-$('#dialog5').height()/2);
$('#dialog5').css('left', winW/2-$('#dialog5').width()/2);
$('#dialog6').css('top', winH/2-$('#dialog6').height()/2);
$('#dialog6').css('left', winW/2-$('#dialog6').width()/2);
}
the iframe html pages are located on the same server. in the same folder as a matter of fact. this is the html iv been using to call the modal containing the iframe.
Code:
<div id="boxes">
<div id="dialog1" class="window">
<div id="closeout"><a href="#">Close Video</a></div>
<div id="1">
<div class="act_video"><iframe src="1.html" name="test1" frameborder="0" height="270" width="480">You need a Frames Capable browser to view this content.</iframe>
</div>
<div class="text_cont"><span class="video_title">title 1</span></br></br>A short description will go here.</div>
</div>
</div>
<div id="mask"></div>
</div>
<div id="boxes">
<div id="dialog2" class="window">
<div id="closeout2"><a href="#">Close Video</a></div>
<div id="2">
<div class="act_video"><iframe src="2.html" name="test2" frameborder="0" height="270" width="480">You need a Frames Capable browser to view this content.</iframe>
</div>
<div class="text_cont"><span class="video_title">title 2</span></br></br>A short description will go here.</div>
</div>
</div>
<div id="mask"></div>
</div>
<div id="boxes">
<div id="dialog3" class="window">
<div id="closeout3"><a href="#">Close Video</a></div>
<div id="3">
<div class="act_video"><iframe src="3.html" name="test3" frameborder="0" height="270" width="480">You need a Frames Capable browser to view this content.</iframe>
</div>
<div class="text_cont"><span class="video_title">title 3</span></br></br>A short description will go here.</div>
</div>
</div>
<div id="mask"></div>
</div>
<div id="boxes">
<div id="dialog4" class="window">
<div id="closeout4"><a href="#">Close Video</a></div>
<div id="4">
<div class="act_video"><iframe src="4.html" name="test4" frameborder="0" height="270" width="480">You need a Frames Capable browser to view this content.</iframe>
</div>
<div class="text_cont"><span class="video_title">title 4</span></br></br>A short description will go here.</div>
</div>
</div>
<div id="mask"></div>
</div>
<div id="boxes">
<div id="dialog5" class="window">
<div id="closeout5"><a href="#">Close Video</a></div>
<div id="5">
<div class="act_video">
<iframe src="5.html" name="test5" frameborder="0" height="270" width="480">You need a Frames Capable browser to view this content.</iframe>
</div>
<div class="text_cont"><span class="video_title">title 5</span></br></br>A short description will go here.</div>
</div>
</div>
<div id="mask"></div>
</div>
<div id="boxes">
<div id="dialog6" class="window">
<div id="closeout6"><a href="#">Close Video</a></div>
<div id="6">
<div class="act_video"><iframe src="6.html" name="test6" frameborder="0" height="270" width="480">You need a Frames Capable browser to view this content.</iframe>
</div>
<div class="text_cont"><span class="video_title">title 6</span></br></br>A short description will go here.</div>
</div>
</div>
<div id="mask"></div>
</div>
Before you post, read our: 
