Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 481
  • Last Modified:

Site fades as video comes on. Then click to get site back. Client doesn't like it.

rockypointendoscopy.com/cirrhosis.html

Hi- you'll see on the video that the site fades to grey a little(as client requested). Then, when you close the video, you have to click twice to get the site to come back from grey.

The client doesn't like that, he wants it to come back from grey when the video is closed. Is there a way to do that within the framework I have? Thanks.
0
mel200
Asked:
mel200
1 Solution
 
Steven HarrisPresidentCommented:
You can manually trigger a close event by calling .trigger('close') on the element you have lightboxed.

$ele.lightbox_me();
$ele.trigger('close');

Or you can use the closeClick option.
0
 
mel200Author Commented:
Thanks- you're going to have to hold my hand a little more, though. :)

Where would either of those go in the code? Thanks.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You should be able to use player ended

https://developers.google.com/youtube/js_api_reference#Adding_event_listener and on ended you would call the close function of your modal.  

Events

onStateChange
This event fires whenever the player's state changes. The value that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).
When the player first loads a video, it will broadcast an unstarted (-1) event. When a video is cued and ready to play, the player will broadcast a video cued (5) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:
YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED


Are you using bootstrap's modal? http://getbootstrap.com/javascript/#modals  If you are, then you would call $('#myModal').modal('hide') once you detect the movie is over via the event listner
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
mel200Author Commented:
Thanks, padas, I'm pretty green at this, so I don't really understand how to use what you posted, although it sounds right..
0
 
jorge_torizResearch & Development ManagerCommented:
On your cirrhosis.html file, change this code:

    <script>
        $(function () {
            $('.youtube').click(function (e) {
                $('#video_container').lightbox_me({
                    centered: true
                });
                e.preventDefault();
            });
        })
        $('.youtube').click(function (e) {
            $('#video_container').lightbox_me({
                centered: true,
                opacity: .5,
                onClose: function () { alert('Sopas'); }
            });
            e.preventDefault();
        });
    </script>

Open in new window


By this one
    <script>
        $(function () {
            $('.youtube').click(function (e) {
                $('#video_container').lightbox_me({
                    centered: true
                });
                e.preventDefault();
            });
        })
        /*$('.youtube').click(function (e) {
            $('#video_container').lightbox_me({
                centered: true,
                opacity: .5,
                onClose: function () { alert('Sopas'); }
            });
            e.preventDefault();
        });*/
    </script>

Open in new window

And in jquery.lightbox_me.js change this code:
$self.delegate(opts.closeSelector, "click", function(e) {
            closeLightbox(); e.preventDefault();
            });

Open in new window

By this one:
$(opts.closeSelector).click(function (e) {
                closeLightbox();
                e.preventDefault();
            });

Open in new window

0
 
mel200Author Commented:
Thanks, I'll try that right now!
0
 
mel200Author Commented:
Better- but I still have to click once on the page to get it back...is there a way to have the page come back on close? So click close, the page is available? Thanks a lot for your help!
0
 
jorge_torizResearch & Development ManagerCommented:
Mmm... weird, can you refresh your cache?, I think your browser is using the previous version of the js file.
0
 
mel200Author Commented:
I cleared my cache, and also tried it on internet explorer, which I'd never had this site on. Same thing, have to click on the site to bring it back. If I look at source, then the js file, I see the correct change on that file.
0
 
jorge_torizResearch & Development ManagerCommented:
Ups, sorry, I forgot another change, this is the current code:
<div onclick="yt_hide()">

Open in new window

And must be changed by this one:
<div onclick="yt_hide()" class="close">

Open in new window

0
 
mel200Author Commented:
Thanks so much! Works perfectly!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now