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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    66
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Help displaying videos in overlay popup

    I have a page where I want my videos to open in an overlay box with black transparent background.
    I found a tutorial that does what I want but I can't figure out how to make it work with multiple videos on the page. Here is a link to the tutorial

    Here is the part of the page where I want the popup. For each one_column_video_box div there is a video that I want to open in a overlay.


    Code:
    <div class="one_column_video_box">
    			<a href="videos.php?vid_id=2">
    				<img src="video_thumbs/avengers.png">
    			</a><!-- link-->
    				<div class="audition_info">
    					<h4>1/12/2012</h4> <!-- title-->
    					<p>Audition from early 2011</p><!-- description-->
    				</div><!-- video info-->
    					
    		</div><!-- close one_column_box -->
    
    		<div class="one_column_video_box">
    			<a href="videos.php?vid_id=2">
    				<img src="video_thumbs/avengers.png">
    			</a><!-- link-->
    				<div class="audition_info">
    					<h4>1/12/2012</h4> <!-- title-->
    					<p>Audition from early 2011</p><!-- description-->
    				</div><!-- video info-->
    					
    		</div><!-- close one_column_box -->
    
    		<div class="one_column_video_box">
    			<a href="videos.php?vid_id=2">
    				<img src="video_thumbs/avengers.png">
    			</a><!-- link-->
    				<div class="audition_info">
    					<h4>1/12/2012</h4> <!-- title-->
    					<p>Audition from early 2011</p><!-- description-->
    				</div><!-- video info-->
    					
    		</div><!-- close one_column_box -->
    here is the section from the tutorial that opens with a video, but how do I create one for ech video on the page?
    Code:
    <div class="bgCover">&nbsp;</div>
    <div class="overlayBox">
    	<div class="overlayContent">
            <a href="#" class="closeLink">X</a>
            
            <!-- video url -->
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="320" id="viddler_gridweb_23"><param name="movie" value="//www.viddler.com/player/9921102b/"/><param name="allowScriptAccess" value="always"/><param name="allowNetworking" value="all"/><param name="allowFullScreen"value="true"/><param name="flashVars" value="f=1&openURL=64073598&autoplay=f&loop=0&nologo=0&hd=0"/><embed src="//www.viddler.com/player/9921102b/" width="640" height="320" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" allowNetworking="all" name="viddler_gridweb_23" flashVars="f=1&openURL=64073598&autoplay=f&loop=0&nologo=0&hd=0"></embed></object>
    
    
    	</div>
    </div>
    <a href="#" class="launchLink">Launch Window</a>

  • #2
    New Coder
    Join Date
    Oct 2010
    Posts
    66
    Thanks
    29
    Thanked 0 Times in 0 Posts
    please?

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    play with this
    Code:
    <style type="text/css">
    body { font:76% verdana; }
    .bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
    .overlayBox {
    	border:5px solid #09F;
    	position:absolute;
    	display:none;
    	width:500px;
    	height:300px;
    	background:#fff;
    }
    .overlayContent {
    }
    .closeLink {
    	float:right;
    	color:red;
    	margin-top: -30px;
    	background: #09F;
    	padding: 6px;
    }
    a:hover { text-decoration:none; }
    
    h2 {
    	padding:5px;
    	margin:0;
    }
    
    .one_column_video_box {
    	border: 2px solid #000;
    	margin: 10px;
    }
    .one_column_video_box span {
    	display: none;
    }
    </style>
    
    <div class="bgCover">&nbsp;</div>
    <div class="overlayBox">
    	<div class="overlayContent">
            <a href="#" class="closeLink">Close</a>
            <!-- video url -->
            <div id="videoDiv">
            </div>
    	</div>
    </div>
    
    <div class="one_column_video_box">
    	<a href="videos.php?vid_id=2" class="launchLink"><img src="video_thumbs/avengers.png"></a><!-- link-->
        	<span class="width">640</span>
            <span class="height">320</span>
            <span class="vid">9921102b</span>
    		<div class="audition_info">
    			<h4>1/12/2012</h4> <!-- title-->
    			<p>Audition from early 2011</p><!-- description-->
    		</div><!-- video info-->
    </div><!-- close one_column_box -->   
    
    <div class="one_column_video_box">
    	<a href="videos.php?vid_id=2" class="launchLink"><img src="video_thumbs/avengers.png"></a><!-- link-->
        	<span class="width">400</span>
            <span class="height">400</span>
            <span class="vid">9jsy82j</span>
    		<div class="audition_info">
    			<h4>1/12/2012</h4> <!-- title-->
    			<p>Audition from early 2011</p><!-- description-->
    		</div><!-- video info-->
    </div><!-- close one_column_box -->  
    
    <div class="one_column_video_box">
    	<a href="videos.php?vid_id=2" class="launchLink"><img src="video_thumbs/avengers.png"></a><!-- link-->
        	<span class="width">550</span>
            <span class="height">120</span>
            <span class="vid">9921102b</span>
    		<div class="audition_info">
    			<h4>1/12/2012</h4> <!-- title-->
    			<p>Audition from early 2011</p><!-- description-->
    		</div><!-- video info-->
    </div><!-- close one_column_box -->  
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script language="javascript">
    
    function insertMovie(){
    
    		var movieWidth = $('.active').parent('.one_column_video_box').children('span.width').text(); 
    		var movieHeight = $('.active').parent('.one_column_video_box').children('span.height').text(); 
    		var movieValue = $('.active').parent('.one_column_video_box').children('span.vid').text();	
    		
    		$('.overlayBox').css({'width' : movieWidth, 'height' : movieHeight});
    		
            $('#videoDiv').html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+movieWidth+'" height="'+movieHeight+'" id="viddler_gridweb_23">\
            	<param name="movie" value="//www.viddler.com/player/'+movieValue+'/"/>\
                <param name="allowScriptAccess" value="always"/>\
                <param name="allowNetworking" value="all"/>\
                <param name="allowFullScreen"value="true"/>\
                <param name="flashVars" value="f=1&openURL=64073598&autoplay=f&loop=0&nologo=0&hd=0"/>\
                <embed src="//www.viddler.com/player/'+movieValue+'/" width="'+movieWidth+'" height="'+movieHeight+'" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" allowNetworking="all" name="viddler_gridweb_23" flashVars="f=1&openURL=64073598&autoplay=f&loop=0&nologo=0&hd=0"></embed>\
            </object>');	
    
    }
    
    function showOverlayBox() {
    	//if box is not set to open then don't do anything
    	if( isOpen == false ) return;
    	// set the properties of the overlay box, the left and top positions
    	
    	insertMovie(); // added 02.26.12
    	
    	$('.overlayBox').css({
    		display:'block',
    		left:( $(window).width() - $('.overlayBox').width() )/2,
    		top:( $(window).height() - $('.overlayBox').height() )/2 -20,
    		position:'absolute'
    	});
    	// set the window background for the overlay. i.e the body becomes darker
    	$('.bgCover').css({
    		display:'block',
    		width: $(window).width(),
    		height:$(window).height(),
    	});
    }
    function doOverlayOpen() {
    	$(this).addClass('active');
    	//set status to open
    	isOpen = true;
    	showOverlayBox();
    	$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
    	// dont follow the link : so return false.
    	return false;
    }
    function doOverlayClose() {
    	$('.active').removeClass('active');
    	//set status to closed
    	isOpen = false;
    	$('.overlayBox').css( 'display', 'none' );
    	// now animate the background to fade out to opacity 0
    	// and then hide it after the animation is complete.
    	$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
    	$('#videoDiv').empty();
    }
    // if window is resized then reposition the overlay box
    $(window).bind('resize',showOverlayBox);
    // activate when the link with class launchLink is clicked
    $('a.launchLink').click( doOverlayOpen );
    // close it when closeLink is clicked
    $('a.closeLink').click( doOverlayClose );
    
    </script>
    From the top down notice this:

    See that I added <div id="videoDiv"></div> in your overlay. This is the div that will have the movie inserted into it.

    Each one_column_video_box has 3 spans. these are:
    Code:
        	<span class="width">640</span>
            <span class="height">320</span>
            <span class="vid">9921102b</span>
    that holds the width, height and path variable to each movie. I also add class="launchLink" to the link.

    Now in the script notice the function insertMovie(){ this grabs the text from each of those spans and makes it a variable. After that it it sets the $('#videoDiv').html(). You'll notice those variables from above being placed in the string.

    So in the showOverlayBox function, thats where it now calls the insertMovie();

    In the function doOverlayOpen() you'll notice this: $(this).addClass('active'). That's adds the class 'active' to the clicked link. It's important because if you remebr in the new function, the variables were set like so: var movieWidth = $('.active').parent(...

    below that in the doOverlayClose() { you'll see: $('.active').removeClass('active');. This removes that active class when the close button is clicked.

    And finally, notice : $('#videoDiv').empty();. This is real important. It removes all the HTML from the vidDiv when the overlay is closed. IE has a neat feature that allows it to keep playing the video unless you completely remove it from the DOM.

    So a run down.

    1. User clicks a video
    2. The clicked link gets a class of active
    3. the modal opens
    4. the values for movieWidth, movieHeight and movieValue are set
    5. the #videoDiv gets a new chunk of HTML which is the object tag with the newly appended variables
    6. user clicks close
    7. the active class is removed
    8. the HTML (the object tag) is completely removed from the #videoDiv

    I also passed the variables to adjust the size of the overlayContent. This way if all your movies are not the same size, the box adjusts to them.

    Try the example code by it self first before trying to work into your existing code.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    aaron4osu (03-27-2012)

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    66
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Wow. Thank you so much for that.

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    66
    Thanks
    29
    Thanked 0 Times in 0 Posts
    harbingerOTV thanks again! I can tell you spent alot of time on that responce and I greatly appreciate it. That got the main functionality of it working on my page, but now I'm having problems with positioning it in the right location.

    I was hoping you might be able to help with a few things.

    1) The div's with the videos are located aprox 800 px from the top so you have to scroll down one full screen to get there. However, when the overlay opens it opens at the top of the page so you have to scroll back up to get there. Is there a way to display it on the same part of the page dynamically so no matter where the overlay trigger is on the page it will display the overlay at that vertical position? If not (or it's just too much work) how about how to move it down 800px? I tried adding the css top:800px to the .overlayBox styling

    2) I could not figure out which style controls the background when the overlay is active. I want to make the background darker.

    here is the html/php section
    Code:
    <!-- ================   Auditions  ======================== -->
    
    	<div id="auditions_container_right">
    
    		<h2 class="sectionheader">My Auditions</h2>
    		
    		<div class="bgCover">&nbsp;</div>
    		<div class="overlayBox">
    			<div class="overlayContent">
    		        <a href="#" class="closeLink">Close</a>
    		        <!-- video url -->
    		        <div id="videoDiv"></div> <!-- close videoDiv(overlay) url from insertMovie() -->
    			</div> <!-- close overlay content -->
    		</div> <!-- close bgCover -->
    
    		<div class="one_column_video_box">
    			<a href="videos.php?vid_id=2" class="launchLink"><img src="video_thumbs/avengers.png"></a><!-- link-->
    		    	<span class="width">640</span>
    		        <span class="height">320</span>
    		        <span class="vid">a2e70d4d</span>
    				<div class="audition_info">
    					<h4>1/12/2012</h4> <!-- title-->
    					<p>Audition from early 2011</p><!-- description-->
    				</div><!-- video info-->
    		</div><!-- close one_column_box -->
    
    		<div class="one_column_video_box">
    			<a href="videos.php?vid_id=2" class="launchLink"><img src="video_thumbs/avengers.png"></a><!-- link-->
    		    	<span class="width">640</span>
    		        <span class="height">320</span>
    		        <span class="vid">ace2363e</span>
    				<div class="audition_info">
    					<h4>1/12/2012</h4> <!-- title-->
    					<p>Audition from early 2011</p><!-- description-->
    				</div><!-- video info-->
    		</div><!-- close one_column_box -->
    		
    	</div> <!-- close auditions_container_right -->
    here is the css
    Code:
    .bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
    	.overlayBox {
    		/*border:0px solid #09F;*/
    		position:absolute;
    		top:800px;
    		display:none;
    		width:500px;
    		height:300px;
    		background:#fff;
    	}
    
    	.overlayContent {
    	}
    
    	.closeLink {
    		float:right;
    		/*color:red;*/
    		margin-top: -30px;
    		/*background: #09F;*/
    		padding: 6px;
    	}
    
    	a:hover { text-decoration:none; }
    
    	h2 {
    		padding:5px;
    		margin:0;
    	}
    
    	.one_column_video_box {
    		border: 2px solid #000;
    		margin: 10px;
    	}
    
    	.one_column_video_box span {
    		display: none;
    	}

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    #1

    Remove the top:800px you added to the overlayBox

    Change:
    Code:
    	$('.bgCover').css({
    		display:'block',
    		width: $(window).width(),
    		height:$(window).height(),
    	});
    to this:
    Code:
    	$('.bgCover').css({
    		display:'block',
    		width: $('html').width(),
    		height:$('html').height(),
    	});
    Change:

    Code:
    	$('.overlayBox').css({
    		display:'block',
    		left:( $(window).width() - $('.overlayBox').width() )/2,
    		top:( $(window).height() - $('.overlayBox').height() )/2 -20,
    		position:'absolute'
    	});
    to this:

    Code:
    	$('.overlayBox').css({
    		display:'block',
    		left:( $(window).width() - $('.overlayBox').width() )/2,
    		top:( $(window).height() - $('.overlayBox').height() )/2 -20,
    		position:'fixed'
    	});
    #2 $('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} ); - adjust the opacity in decimal format
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    aaron4osu (04-03-2012)

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    66
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Thanks harbingerOTV!

    I made the changes you suggested, and it moved the overlay to the right position, but the video is still at the top.

    Any ideas?

    also do you know how to make it so the overlay covers the entire page? The way it is right now if you scroll up or down the rest of the page looks normal instead of darkened.

    Thanks again for taking the time to dig into this.

    here is the updated js
    Code:
    function insertMovie(){
    
    		var movieWidth = $('.active').parent('.one_column_video_box').children('span.width').text(); 
    		var movieHeight = $('.active').parent('.one_column_video_box').children('span.height').text(); 
    		var movieValue = $('.active').parent('.one_column_video_box').children('span.vid').text();	
    		
    		$('.overlayBox').css({'width' : movieWidth, 'height' : movieHeight});
    		
            $('#videoDiv').html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+movieWidth+'" height="'+movieHeight+'" id="viddler_gridweb_23">\
            	<param name="movie" value="//www.viddler.com/player/'+movieValue+'/"/>\
                <param name="allowScriptAccess" value="always"/>\
                <param name="allowNetworking" value="all"/>\
                <param name="allowFullScreen"value="true"/>\
                <param name="flashVars" value="f=1&openURL=64073598&autoplay=f&loop=0&nologo=0&hd=0"/>\
                <embed src="//www.viddler.com/player/'+movieValue+'/" width="'+movieWidth+'" height="'+movieHeight+'" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" allowNetworking="all" name="viddler_gridweb_23" flashVars="f=1&openURL=64073598&autoplay=f&loop=0&nologo=0&hd=0"></embed>\
            </object>');	
    
    }
    
    function showOverlayBox() {
    	//if box is not set to open then don't do anything
    	if( isOpen == false ) return;
    	// set the properties of the overlay box, the left and top positions
    	
    	insertMovie(); // added 02.26.12
    	
    	$('.overlayBox').css({
    		display:'block',
    		left:( $(window).width() - $('.overlayBox').width() )/2,
    		top:( $(window).height() - $('.overlayBox').height() )/2 -20,
    		position:'fixed'
    	});
    	// set the window background for the overlay. i.e the body becomes darker
    	$('.bgCover').css({
    		display:'block',
    		width: $('html').width(),
    		height:$('html').height(),
    	});
    }
    function doOverlayOpen() {
    	$(this).addClass('active');
    	//set status to open
    	isOpen = true;
    	showOverlayBox();
    	$('.bgCover').css({opacity:0}).animate( {opacity:0.9, backgroundColor:'#000'} );
    	// dont follow the link : so return false.
    	return false;
    }
    function doOverlayClose() {
    	$('.active').removeClass('active');
    	//set status to closed
    	isOpen = false;
    	$('.overlayBox').css( 'display', 'none' );
    	// now animate the background to fade out to opacity 0
    	// and then hide it after the animation is complete.
    	$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
    	$('#videoDiv').empty();
    }
    // if window is resized then reposition the overlay box
    $(window).bind('resize',showOverlayBox);
    // activate when the link with class launchLink is clicked
    $('a.launchLink').click( doOverlayOpen );
    // close it when closeLink is clicked
    $('a.closeLink').click( doOverlayClose );
    
    </script>
    updated css
    Code:
    .bgCover { 
    	background:#000; 
    	position:absolute; 
    	left:0; 
    	/*top:0;*/
    	display:none; 
    	overflow:hidden 
    }
    	
    	.overlayBox {
    		/*border:0px solid #09F;*/
    		position:absolute;
    		display:none;
    		width:500px;
    		height:300px;
    		background:#fff;
    	}
    
    	.overlayContent {
    	}
    
    	.closeLink {
    		float:right;
    		/*color:red;*/
    		margin-top: -30px;
    		/*background: #09F;*/
    		padding: 6px;
    	}
    
    	a:hover { text-decoration:none; }
    
    	h2 {
    		padding:5px;
    		margin:0;
    	}
    
    	.one_column_video_box {
    		border: 2px solid #000;
    		margin: 10px;
    	}
    
    	.one_column_video_box span {
    		display: none;
    	}
    section of html
    Code:
    <div id="auditions_container_right">
    
    		<h2 class="sectionheader">My Auditions</h2>
    		
    		<div class="bgCover">&nbsp;</div>
    		<div class="overlayBox">
    			<div class="overlayContent">
    		        <a href="#" class="closeLink">Close</a>
    		        <!-- video url -->
    		        <div id="videoDiv"></div> <!-- close videoDiv(overlay) url from insertMovie() -->
    			</div> <!-- close overlay content -->
    		</div> <!-- close bgCover -->
    
    		<div class="one_column_video_box">
    			<a href="videos.php?vid_id=2" class="launchLink"><img src="video_thumbs/avengers.png"></a><!-- link-->
    		    	<span class="width">640</span>
    		        <span class="height">320</span>
    		        <span class="vid">a2e70d4d</span>
    				<div class="audition_info">
    					<h4>1/12/2012</h4> <!-- title-->
    					<p>Audition from early 2011</p><!-- description-->
    				</div><!-- video info-->
    		</div><!-- close one_column_box -->
    
    		<div class="one_column_video_box">
    			<a href="videos.php?vid_id=2" class="launchLink"><img src="video_thumbs/avengers.png"></a><!-- link-->
    		    	<span class="width">640</span>
    		        <span class="height">320</span>
    		        <span class="vid">ace2363e</span>
    				<div class="audition_info">
    					<h4>1/12/2012</h4> <!-- title-->
    					<p>Audition from early 2011</p><!-- description-->
    				</div><!-- video info-->
    		</div><!-- close one_column_box -->
    		
    	</div> <!-- close auditions_container_right -->
    Last edited by aaron4osu; 04-03-2012 at 05:52 PM.

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    .bgCover { 
    	background:#000; 
    	position:absolute; 
    	left:0; 
    	/*top:0;*/
    	display:none; 
    	overflow:hidden 
    }
    uncomment top. It's needed.

    Here's a demo. It works for me. If that's not right, can you post a link to your full page? It could be something not directly related.

    http://jsfiddle.net/j6tmj/
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    aaron4osu (04-03-2012)

  • #9
    New Coder
    Join Date
    Oct 2010
    Posts
    66
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Yea it is still working for me.

    Also I can't get the opacity to change.

    .9 is the darkest right?

    Code:
    $('.bgCover').css({opacity:0}).animate( {opacity:0.9, backgroundColor:'#111'} );


  •  

    Posting Permissions

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