0

I am trying to center align a video popup using,

$('#videoid').css("top", (($(window).height() - $('#videoid').outerHeight()) / 2) + $(window).scrollTop() + "px");
$('#videoid').css("left", (($(window).width() - $('#videoid').outerWidth()) / 2) + "px");

It works perfect when I do orientation change in android phones, but in iOS phones and iPad on orientation change (portrait to landscape) the popup is moving up. It is not aligning center.

My videoid CSS is

#videoid {
height: auto;
max-height: 230px;
min-height: 150px;
position: absolute;
width: 70%;
}

Width wise the popup is center aligned but height wise the popup is moving up. Any help suggestion is appreciated. Thanks in advance.

I found that the height of <div id="videoid"> is getting changed on rotation. Any solution to control the height.

Sarvap Praharanayuthan
  • 4,212
  • 7
  • 47
  • 72
aaviss
  • 401
  • 2
  • 10
  • 29

1 Answers1

0

Because your element is changing height, the position is no longer relevant to the hight of the element. You'll need to calculate it again.

See this solution on how to fire your code on orientation change.

Community
  • 1
  • 1
Ojame
  • 169
  • 1
  • 1
  • 9