Solved

Video Pop-up Change Needed

Posted on 2013-11-28
14
359 Views
Last Modified: 2013-11-29
Hi, all,  www.rockypointendoscopy.com/endoscopy-lower.html

On that page and others like it, I have a pop-up video. Client wants two changes:

1. Video pops up exactly in center of screen.
2. Rest of website fades out almost to black as video plays.

Does anyone know of a script out there that will do that for me? Or are there some changes that can be made to the script I have to allow those changes?

Thanks!
0
Comment
Question by:mel200
  • 7
  • 7
14 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39684444
In
#video_container > iframe {}

add
left: 50%;
margin-left: -25%;
position: absolute;


and remove
float: right;
padding-right: 30px;



But since you are using jquery why not just use one of the lightbox plugins
http://buckwilson.me/lightboxme/
Will center it and fade out the screen
0
 

Author Comment

by:mel200
ID: 39684563
Thanks! Will try tomorrow- been going 15 hours straight.. weary. :)
0
 

Author Comment

by:mel200
ID: 39685261
I will need some help with this... I have jquery, and I uploaded jquery.lightbox_me.js into scripts as well. This is what I have currently:

<a onclick="yt_show()"><img width="90" height="70" style="cursor: pointer" alt="" title="Lower Endoscopy" src="http://img.youtube.com/vi/qIHsxq-qjnI/1.jpg"></a>
<div id="video_container"></div>
      

Can I just wrap the whole thing in the lightbox? Can you help me with the code, please, I don't know much at all about jquery. Thanks.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39685474
For the anchor tag you have around the youtube image add a class and remove the onclick
So
<a onclick="yt_show()">
becomes
<a class="youtube">

Remove function yt_show() {.....}
And just place the DIV code directly into <div id="video_container">

Add this css
#video_container {
     display:none
}



Add the simple lightbox script and add after it
<script>
$('.youtube').click(function(e) {
    $('#video_container').lightbox_me({
        centered: true
        });
    e.preventDefault();
});
</script>
0
 

Author Comment

by:mel200
ID: 39685818
Hi- I think I've done what you asked, but it isn't working correctly. Probably I misunderstood something. Thanks very much for your help and patience!
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39685844
Change the script to this
<script>
$(function() {
$('.youtube').click(function(e) {
    $('#video_container').lightbox_me({
        centered: true
        });
    e.preventDefault();
});
})
</script>

Open in new window


You also removed the function but you didn't move the youtube div into the video_container div
0
 

Author Comment

by:mel200
ID: 39685935
Ok, I think I did it right, but still not working...sorry.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39685942
Move the script so it is after the jquery inclusion script
0
 

Author Comment

by:mel200
ID: 39685993
Ok- Cool!! So now.... can I make the background fade out a little bit more, and can I center the video?
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39686000
Add an extra option for opacity and just adjust it

$('.youtube').click(function(e) {
    $('#video_container').lightbox_me({
        centered: true,
       opacity: .8
        });
    e.preventDefault();
});


In the css change #video_container > iframe to this

#video_container > iframe {
    height: 50%;
    left: 50%;
    margin-left: -25%;
    position: absolute;
    width: 50%;
}
0
 

Author Comment

by:mel200
ID: 39686017
That's fantastic, thanks! One last question...how do I get the CLOSE closer to the screen? It's way over on the right now. You've been amazing, thanks for your help!!
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39686036
Change #video_container > div {} to this

#video_container > div {
    cursor: pointer;
    position: absolute;
    right: 25%;
}
0
 

Author Closing Comment

by:mel200
ID: 39686040
Can I give higher than A? Fantastic, thanks!!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39686051
;o)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now