Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    modal box is loading iframed page (containing autostart video) before box even opens.

    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>
    Last edited by gribbs100; 04-15-2012 at 06:16 PM.

  • #2
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    to simplyify things, maynbe this well help to get help:

    If I add some css to say:

    iframe: display:none;

    How would I adjust my jquery to override that css and display the iframe content for each of the 6 videos accordingly then on "closeout", set it to display none again.

    That should shut up the video/audio from playing when its not suppose to right?


    I never thought it would be so hard to have 6 different videos available to play. Its so buggy in certain browsers.

    Any help would be great.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •