Solved

Video Pop-up Change Needed

Posted on 2013-11-28
14
379 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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
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…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

792 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