2

I am trying to have a pop up video player. Would use fancybox, but they went non-commercial, and my use case is relatively simple. Basically I am creating a div that cover the whole page in a black background with enough opacity to still see all the content. I want to position a youtube video (via iframe hard link insertion) at the user's current location on the page (height wise) over this "overlay" div. Basically, I do not want to put this video at a height locationon the page the user will have to scroll to.

I looked through the jquery library, including browser and support and did not see anything of note. Is there a method I am missing? It could be a Javascript solution by the way, I just happen to be using JQuery for everything else so stylistically, ya know.

EDIT:

I am trying to put this new div (containing the iframe code) at the location the user's browser viewport currently is, NOT determine the height of the document, or the height of the browser's viewport.

thatidiotguy
  • 8,701
  • 13
  • 60
  • 105

4 Answers4

3

Use $(window). For example:

console.log($(window).height());
console.log($(window).width());

Try it as you resize the browser window, you will see it change.

If you want to get the position the window viewport is scrolled to, use $(window).scrollTop() and $(window).scrollLeft().

If you want to get the position of a particular element, use $("#myid").position() (relative to offset parent) or $("#myid")offset() (relative to document).

Ed Bayiates
  • 11,060
  • 4
  • 43
  • 62
  • Hmm, so actually, how will this help me determine the user's location though? This is going to give me the height of the browser viewport? I need to know the location of the browser viewport however. Let me look into the DOM and see if I can find the property I need for window though. thank you. – thatidiotguy Aug 27 '12 at 22:05
1

jquery Height Documentation

jquery Width Documentation

To get document height :
$(window).height();

To get document width :
$(window).width();

insomiac
  • 5,648
  • 8
  • 45
  • 73
  • you can use scrollTop() to get vertical position of user. Once you get that calculate the current position of the user using height. – insomiac Aug 27 '12 at 22:30
1

.height() or .outerHeight() should both work:

http://jsfiddle.net/hL3cv/

$(window).height();
$(window).outerHeight();
$(window).width();
$(window).outerWidth();
vol7ron
  • 40,809
  • 21
  • 119
  • 172
0

I use PrettyPhoto. It's not too large, and if you are comfortable with JavaScript, you can strip out any unneeded code to make it even more compact.

Nick
  • 5,995
  • 12
  • 54
  • 78
  • How does this answer the OP's question about how to find the correct coordinates? – Ed Bayiates Aug 27 '12 at 21:36
  • @Nick Thanks for the suggestion. I will look into it if implementing it myself has some cross-broswer issues or if it becomes too much. – thatidiotguy Aug 27 '12 at 21:55
  • @AresAvatar It answers the question behind the question ;) The other two answers answer the direct question quite adequately. However, the OP says he is "trying to have a pop up video player" and this may save him having to reinvent the wheel. – Nick Aug 27 '12 at 22:22
  • @thatidiotguy If you do go down the prettyPhoto track, I'm happy to shoot you a stripped-back copy of the code tweaked particularly for Vimeo. It is, as they say, quite pretty :) – Nick Aug 27 '12 at 22:23
  • @Nick Does it work in phone browsers? iPhone is of particular interest. – thatidiotguy Aug 27 '12 at 22:29
  • @thatidiotguy My quick Google search on "prettyPhoto iphone" suggests it doesn't work that well. – Nick Aug 27 '12 at 23:39
  • @Nick OK, perhaps should have added that since someone (not me) put a -1 on you. – Ed Bayiates Aug 28 '12 at 16:27
  • @AresAvatar No worries. I'd assumed it was you, but it doesn't greatly phase me ;) – Nick Aug 28 '12 at 21:00