Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Video Pop-up Change Needed

Posted on 2013-11-28
14
Medium Priority
?
404 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

 
LVL 58

Assisted Solution

by:Gary
Gary earned 2000 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 2000 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 2000 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 2000 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 2000 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

610 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