Solved

Make youtube video smaller, move position

Posted on 2013-10-23
8
283 Views
Last Modified: 2013-10-24
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.
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
  • 5
  • 3
8 Comments
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39596622
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

0
 

Author Comment

by:mel200
ID: 39597098
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.
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39597259
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


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

0
Technology Partners: 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!

 

Author Comment

by:mel200
ID: 39597583
I've done that, and oddly it seems to make everything on the page un-clickable, including the youtube image.
0
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 500 total points
ID: 39597598
the video_container div is lying over it all, you need to make sure you have it's style set to "none" to begin with.

You did not change it. Should be like this:
#video_container {
    height: 100%;
    left: 0;
    position: absolute;
    top: 120px;
    width: 100%;
    display: none;
}

Open in new window


Another thing, seems I got my scope a bit wrong.

Change the functions as follows:
function yt_show()
{
  var vc = document.getElementById('video_container');
  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()
{
    var vc = document.getElementById('video_container');
	vc.innerHTML = '';
	vc.style.display = 'none';
}

Open in new window

0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39597812
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

0
 

Author Closing Comment

by:mel200
ID: 39597994
That works, thanks very much!
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39598079
You're welcome. Good luck
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

Title # Comments Views Activity
Html split(text) Part2 6 25
SP result not being displayed 5 44
How to show popup no matter what a user clicks on navigation wise 10 36
Make Float not to Wrap 15 35
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 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