Seeking DHTML Floating Video Help

Seeking DHTML Floating Video Help

Posted by: bohemiantheory
Posted on: 2008-12-23 22:36:00

Hi.
I'm in the process of putting in a DHTML floating video on a website. I've used the tutorial posted on this website:
http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding#quickIDX4

This is what my result is (click on the image for the milgram experiment):
http://www.wayneren.com/films/

I'm trying to get the video completely centered on the page and I can't figure out how to do it. Right now, as you can see, there are scrollbars both horizontally and vertically, even though I have turned the scrollbar function off. In addition, the video is popping up further down on the page instead of floating in the center. I've tried searching the web and have found that other people have had a similar issue and have resolved it, but no one has seemed to post their resolution. Does anyone know how I can fix this?

Thank you.

Re: Seeking DHTML Floating Video Help

Posted by: skoizumi
Posted on: 2008-12-25 15:11:00

div id=milgram left 50% in stead of specifying the size

div id=darkenScreenObject width 100% in stead of specifying the size

after the change I works with firefox. You still need to check with other browsers.



Re: Seeking DHTML Floating Video Help

Posted by: bohemiantheory
Posted on: 2008-12-28 12:33:00

Ok. Thank you so much for the help. I'm really inexperienced with javascript and I tried to play around with it, but I'm not exactly sure where I should change those percentages. Is it in the head section or where/what exactly do I change?

Thank you.

Re: Seeking DHTML Floating Video Help

Posted by: silkrooster
Posted on: 2008-12-28 16:22:00

Those percentages are css values. If you do not have them, you can create them as a separate file, in the head, or inline. I personally prefer to stay away from inline if possible, as changing values later is easier especially if the are class values instead of ID values.
I recommend that you do a google search for free CSS tutorials.

My website

Re: Seeking DHTML Floating Video Help

Posted by: skoizumi
Posted on: 2008-12-29 17:00:00

I meant you need to make the change to
<div id="milgram">
You need to specify left: 50% instead of left: XXXpx;

and for
<div id="darkenScreenObject">
You need to specify width:100% in stead of specifying the width with px

Re: Seeking DHTML Floating Video Help

Posted by: bohemiantheory
Posted on: 2008-12-29 19:03:00

Okay, I went and changed the coding to this, but it didn't change anything. Is this what you ment?

<div id='milgram' class='video' style='position: absolute; left: 50%; display: none;
padding: 10px; background-color: #180d0b; border: 3px #180d0b;'>
<a href="#" onclick='return popVideo("close")' style='float: left; color: white;'>Close</a><BR>
<object width="100%"
<param name="movie" value="http://www.youtube.com/v/BD237Fq5XWs&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/BD237Fq5XWs&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="640" height="505">
</embed>
</object>
</div>


Re: Seeking DHTML Floating Video Help

Posted by: bohemiantheory
Posted on: 2008-12-29 19:05:00

Oops, I forgot to close the object tag. Okay, here is what I have, but nothing changed:

<div id='milgram' class='video' style='position: absolute; left: 50%; display: none;
padding: 10px; background-color: #180d0b; border: 3px #180d0b;'>
<a href="#" onclick='return popVideo("close")' style='float: left; color: white;'>Close</a><BR>
<object width="100%">
<param name="movie" value="http://www.youtube.com/v/BD237Fq5XWs&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/BD237Fq5XWs&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="640" height="505">
</embed>
</object>
</div>

Re: Seeking DHTML Floating Video Help

Posted by: skoizumi
Posted on: 2008-12-30 01:40:00

Sorry I wan't looking hard enough.

Can you go back to whatever it was( forget what i said ) and

move this everything inside of <div id='milgram'>
to right after the body tag so that it will look like
<body>
<div class="video" id="milgram" ..... >


I didn't see that that javascript is calculating to center the modal dialog.


Re: Seeking DHTML Floating Video Help

Posted by: bohemiantheory
Posted on: 2008-12-30 13:48:00

Oh my gosh, it works!! Thank you so much! I do have one more question, though- how do I get rid of the horizontal scrollbar. I put the horizontal scrollbar as hidden, but it's still showing up.

Thank you!

Re: Seeking DHTML Floating Video Help

Posted by: skoizumi
Posted on: 2008-12-30 16:39:00

For the scrollbar, I think we have to change the width to 100% like the following.

<div style="overflow: hidden; background-color: rgb(0, 0, 0); opacity: 0.7; z-index: 1; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 2235px;" id="darkenScreenObject"/>

You may have to do the same thing for the height for IE to display the transparent background all the way down to the button.