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:

before

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:

after

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!

 

WatchKit is coming!

WatchKit comes as it’s supposed to be. I always think it is a brilliant chance to develop a series of watch apps.

While looking up the documentations Apple gives out, I find there are something interesting, or unbelievable.

For example, could you design the resolutions of your Apple Watch like this?

watch_screen_sizes_2x

 

Apple is so kind to add a few lines below the picture: Provide image assets for different screen sizes as needed.

Now we are not only dealing with varies of sizes on iPhone or iPad but also on Apple watch – a single product line.

Anyway, what are you planing for the upcoming chances?