asked on

Make youtube video smaller, move position

rockypointendoscopy.com/appendicitis.html

Hi all, If you scroll down to the bottom of the screen, you'll see an image for a youtube video. If you click on it, you'll see a large screen, and the word CLOSE to the right.

I'd like the video to be 50% of the size it is now, but still be close to the word CLOSE, so people will know how to back out of it if they like. Need help again! Thanks in advance.

Pierre Cornelius

Let's review:

You have a div with id="video_container"
inside which you have another div for closing
and an iframe for displaying the video

Use the following css rules:

#video_container {
    height: 100%;
    left: 0;
    position: absolute;
    top: 120px;
    width: 100%;
}


#video_container > iframe {
    float: right;
    height: 50%;
    padding-right: 30px;
    width: 50%;
}

#video_container > div{
    cursor: pointer;
    float: right;
    padding-right: 30px;
}

Open in new window

and the following html:

<div id="video_container">
<div onclick="document.getElementById('video_container').innerHTML=''">CLOSE</div><br>
<iframe frameborder="0" src="http://www.youtube.com/embed/M2_VvTc2nOg?version=3&amp;autoplay=1"></iframe>
</div>

Open in new window

Melody Scott

ASKER

That works except I lose the pop-up aspect, which is also important. So I want a small image, http://img.youtube.com/vi/M2_VvTc2nOg/1.jpg, to be on the page, and when I click on that, I want the video to appear just as you have it.

Pierre Cornelius

Add this to your style #video_container style:
display: none;

replace

function big_yt(yt_container,url)
{
document.getElementById(yt_container).innerHTML='<div style="position: absolute; left: 150px; top: 100px; right: 50px; bottom: 80px"><div style="position: relative; float: right; cursor: pointer" onclick="document.getElementById(\''+yt_container+'\').innerHTML=\'\'">CLOSE<\/div><br><iframe src="'+url+'" style="position: absolute; width: 100%; height: 100%" frameborder="0"><\/iframe><\/div>'
}

Open in new window

with:

var vc = document.getElementById('video_container');

function yt_show()
{
  vc.innerHTML = '<div onclick="yt_hide()">CLOSE</div><br><iframe frameborder="0" src="http://www.youtube.com/embed/M2_VvTc2nOg?version=3&amp;autoplay=1"></iframe>';                                            
  vc.style.display = 'block';	
}

function yt_hide()
{
	vc.innerHTML = '';
	vc.style.display = 'none';
}

Open in new window

Change this:

<a onclick="big_yt('video_container','http://www.youtube.com/embed/M2_VvTc2nOg?version=3&amp;autoplay=1')"><img width="90" height="70" style="cursor: pointer" alt="" title="Appendicitis Operation" src="http://img.youtube.com/vi/M2_VvTc2nOg/1.jpg"></a>

Open in new window

<a onclick="yt_show()"><img width="90" height="70" style="cursor: pointer" alt="" title="Appendicitis Operation" src="http://img.youtube.com/vi/M2_VvTc2nOg/1.jpg"></a>

Open in new window

Melody Scott

ASKER

I've done that, and oddly it seems to make everything on the page un-clickable, including the youtube image.

ASKER CERTIFIED SOLUTION

Pierre Cornelius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pierre Cornelius

Why not make like an overlay centered and 50% of width and height. Try this, see what you think:

#video_container {
background-color: #000000;
height: 100%;
left: 0;
opacity: 0.5;
padding-top: 120px;
position: absolute;
top: 0;
width: 100%;
}

#video_container > div {
color: #FFFFFF;
cursor: pointer;
height: 50%;
margin: 0 auto;
text-align: right;
width: 50%;
}

#video_container iframe {
height: 100%;
width: 100%;
}

and changed this (in the yt_show function):

vc.innerHTML = '<div onclick="yt_hide()">CLOSE</div><br><iframe frameborder="0" src="http://www.youtube.com/embed/M2_VvTc2nOg?version=3&amp;autoplay=1"></iframe>';

Open in new window

to this:

vc.innerHTML = '<div onclick="yt_hide()">CLOSE<br><iframe frameborder="0" src="http://www.youtube.com/embed/M2_VvTc2nOg?version=3&amp;autoplay=1"></iframe></div>';

Open in new window

Melody Scott

ASKER

That works, thanks very much!

Pierre Cornelius

You're welcome. Good luck