0 Replies - 1323 Views - Last Post: 07 December 2012 - 09:03 AM

#1 boknoval  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-December 12

pop-up window for video

Posted 07 December 2012 - 09:03 AM

Hi, need help with this one. I'm not really well versed with java scripts and all.
I have been working on to create a pop-up window for youtube video using javascript.

I have this code which I have been trying to work on, but hereís the problem:
  • When viewing the page, even when I havenít clicked the link for the video yet, the video automatically plays.
  • When I clicked the link for the video, obviously, the video is already playing.
  • Even if I have closed the pop-up window, the video is still playing.


What I really wanted to happen is:
  • When Iíd click the link for the video, thatís when the video should automatically start playing.
  • When closing the pop-up window, the video would stop playing.


Could anyone help me with this one? Hereís what I have been working on...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script>
	$(function() {
				
	var height = $(document).height();
    var width = $(document).width();
	var spanHeight = $('.popup').height();
    var spanWidth = 500;
	
	$('.pop-up-link').click(function() { 
        $(this).next() 
		.css({ "top" :  height/2 - spanHeight/2 })
        .css({ "left" : width/2 - spanWidth/2 })	
		.fadeIn(500);
	});
	
    $(".close").click(function () {
    	$('.pop-up-link').next().fadeOut(500);
    });
});
</script>

<style>
h3 { margin:0; }
.popup { position: absolute; padding: 5px; background: #CCC; border: #666 1px solid; display:none; width:500px; margin: 0 auto; min-height: 200px; }
.close { float: right; position: relative; z-index: 99999; margin: 3px 6px 0; }
.pop-heading { background: #7F7777; color: #FFF; overflow: hidden; padding: 0.5em; position: absolute; width: 487px; }
.pop-info { padding: 15px 2px 15px 2px; clear:both; }
</style>

<h1>Funny</h1>

<a class="pop-up-link" href="#" title="Funny Babies">Watch Video</a>
<div class='popup'>
	<a href='#' title="Close" class='close' name="Funny Babies">
	<img src="http://picpaste.com/extpics/close-XdZcGwGA.png" alt='close' height="20" width="20" /></a>
    <div class="pop-heading">
        <h3>Test Video</h3>
    </div>
    <div class="pop-info">
        <p><iframe width="500" height="315" src="http://www.youtube-nocookie.com/embed/nEmqlGwJ3L8?autoplay=1" frameborder="0" allowfullscreen></iframe></p>
    </div>
</div>



Is This A Good Question/Topic? 0
  • +

Page 1 of 1