UIWebView: YouTube video got shifted down a little bit after resizing

Have you met this? When you embed your YouTube video in your iOS App, it should look like this:


The blue area is the other part of your app. You are using YouTube iframe API to show your clip in a perfect size.

However, if you need to resize it smaller, you may get the following result:


The red part indicates the original size of your UIWebView. You’ll see there is an ugly black rectangle at the top of the video. Yes, the whole YouTube video player has got moved down.

I have researched for a whole day to figure out why it happens and how to prevent it, and finally I have got something and a work around.

It should be an iOS UIWebView issue, or in detail, it is an issue of the iOS UIKit controls who contains a CALayer.  If you are using some customized UIView as your OpenGLView, it could happen as well. However, I have found a work around for this issue – embed YouTube player shift issue:

Usually we use the following code to show a YouTube video in our UIWebViews in fullscreen:

<iframe id='playerId' type='text/html' width=100% height=100% src='https://www.youtube.com/embed/xxxxxx' >

height=100% would cause the problem. Try using 90% or 95% instead, you’ll find the problem has solved!

However, it isn’t solved perfectly because: a) I don’t want my video player contains a border on the top/bottom; b) The problem may come out again when the player is resized small enough.

To make a perfect work around, we can keep using our height=100% code and add the following javascript:

window.onresize = function() {
  document.getElementById('playerId').style.height = window.innerHeight;

Believe or not, the issue has solved perfectly!