• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 416
  • Last Modified:

Video Pop-up Change Needed

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
mel200
Asked:
mel200
  • 7
  • 7
5 Solutions
 
GaryCommented:
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
 
mel200Author Commented:
Thanks! Will try tomorrow- been going 15 hours straight.. weary. :)
0
 
mel200Author Commented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GaryCommented:
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
 
mel200Author Commented:
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
 
GaryCommented:
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
 
mel200Author Commented:
Ok, I think I did it right, but still not working...sorry.
0
 
GaryCommented:
Move the script so it is after the jquery inclusion script
0
 
mel200Author Commented:
Ok- Cool!! So now.... can I make the background fade out a little bit more, and can I center the video?
0
 
GaryCommented:
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
 
mel200Author Commented:
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
 
GaryCommented:
Change #video_container > div {} to this

#video_container > div {
    cursor: pointer;
    position: absolute;
    right: 25%;
}
0
 
mel200Author Commented:
Can I give higher than A? Fantastic, thanks!!
0
 
GaryCommented:
;o)
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.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

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