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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    need help with pop-up window javascript

    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...
    Code:
    <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>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    im pretty sure the you can tun off autoplay by changing the ?autoplay=1 to a 0 in the iframe url.

    this is all happening because you are including the video on the page in a hidden iframe, with autoplay turned on.

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You are fading out the div but it is still present on the page. You could remove it entirely. Either

    Code:
    $(".close").click(function () {
        	$('.pop-up-link').next().fadeOut(500).remove();
        });
    
    // or probably
    
    $(".close").click(function () {
        	$('.pop-up-link').next().fadeOut(500, function () {
                $(this).remove();
           });
        });
    If you might want to re-activate it later you might consider css('display', 'none') .. but I can't remember/haven't checked if this will stop the video(?).

    Alternatively consider dynamically changing the src of the iframe to a static image, perhaps after it has faded-out (as in my above code).
    Last edited by AndrewGSW; 12-07-2012 at 08:00 PM. Reason: probably
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    boknoval (12-07-2012)

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    There is, alternatively, a YouTube API to control a video in an iframe.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    You are fading out the div but it is still present on the page. You could remove it entirely. Either

    Code:
    $(".close").click(function () {
        	$('.pop-up-link').next().fadeOut(500).remove();
        });
    
    // or probably
    
    $(".close").click(function () {
        	$('.pop-up-link').next().fadeOut(500, function () {
                $(this).remove();
           });
        });
    If you might want to re-activate it later you might consider css('display', 'none') .. but I can't remember/haven't checked if this will stop the video(?).

    Alternatively consider dynamically changing the src of the iframe to a static image, perhaps after it has faded-out (as in my above code).
    Hi AndrewGSW, thanks for the code above. It did actually stop the video when closing the pop-up window. The only problem I had now is that, when I launch the page to a browser the video plays automatically even when I haven't clicked the link yet. Is there a way I could do to make it play automatically only when the link has been clicked? I really would appreciate your help. Thanks!

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Is there a way I could do to make it play automatically only when the link has been clicked?
    Other than using the API I mentioned, you could set the initial src to a static image (of the correct size) and swap this src when they click the link.

    Maybe..

    Code:
    $('.pop-up-link').click(function() { 
        $(this).next() 
        .css({ "top" :  height/2 - spanHeight/2 })
        .css({ "left" : width/2 - spanWidth/2 })    
        .fadeIn(500, function () {
            $('iframe').attr('src', 'http://www.youtube-nocookie.com/embed/nEmqlGwJ3L8?autoplay=1');
            // you should give the iframe an id..
            // then use $('#yourframeid')
        });
    });
    HINT Give specific elements id's rather than using $(this).next() etc..
    Last edited by AndrewGSW; 12-07-2012 at 10:07 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    boknoval (12-08-2012)


  •  

    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
    •