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.
mel200Asked:
Who is Participating?
 
jorge_torizConnect With a Mentor Research & 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
 
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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
 
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
 
mel200Author Commented:
Thanks so much! Works perfectly!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.