SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to have videos open in overlay box

    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.

    HTML 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?
    HTML 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. #2
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please? Any help would be greatly appreciated.


Bookmarks

Posting Permissions

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