Solved

Video Pop-up Change Needed

Posted on 2013-11-28
14
386 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

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 …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 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