While working on the iPhone/iPad application for the
ChickenChannel website, I needed to have the embedded YouTube video
resize dynamically to fit properly and in proportion across the
screen of the device. Moreover, the iPad allows for rotating
the view, and we needed the video to resize to accomodate both
orientations dynamically as you rotate the device.
The Chicken Channel is written in Umbraco, and the iOS
application takes advantage of that by presenting existing pages
with a customised template. So while you might look at a
recipe on the website and see the nice embedded Youtube video
(hidden behind a banner image that prompts you to click it to start
playing the video - this was covered in a post last November here.),
the iPhone and iPad views are somewhat different.
Step 1: Make the video automatically fill the width of the
screen.
This was quite easy: all I needed to do was clear the
width and height the enclosing div and the object tags and set the
width to 100% on the embed tag. I could have set the height
as well, but given that there are 3 possible width with the
devices, and I'm "veiling" the page until it's loaded anyway, I
didn't see any point. This displays a rather wide but short
video on the iPhone:
<div class="youTubePlayer">
<object class="youTubePlayer">
<param name="movie" value="http://www.youtube.com/v/rldN0jSBbZQ?fs=1&rel=0" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed class="youTubePlayer" src="http://www.youtube.com/v/rldN0jSBbZQ?fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" />
</object>
</div>
Step 2: Use Javascript to add the aspect ratio back in (set the
Height).
Using jQuery this is a really simple excercise: We simply
get the width of the window, and, because all our videos are in
16:9 aspect ratio, we use that to derive the height before applying
it to the relevant tags. (Notice the embed and object tags
also have the class="youTubePlayer" attribute
above?) - you'll also need to add the jQuery core library to your
page...
<script type="text/javascript">
$(document).ready(function() {
var newHeight = $(window).width()*9/16;
if (newHeight > 500)
newHeight = 500;
$('.youTubePlayer').attr("height", newHeight);
});
</script>
Right, after testing a little, we notice that the page renders,
then the video gets lengthened to the correct ratio and all is good
in the world. However, when rotating the iPad application,
the videos dimensions aren't resized along with the rest of the
content. Actually, the video's width is resized, but the
height stays where we left it.
Step 3: Use the Resize event to adjust the aspect ratio on
Rotation
The final step to this process was to take advantage of the
UIWebView's resize javascript event to perform the resize
again:
<script type="text/javascript">
$(window).resize(function() {
var newHeight = $(window).width()*9/16;
var oldHeight = $('div.youTubePlayer:first').attr("height");
if (newHeight > 500)
newHeight = 500;
if (newHeight = oldHeight)
return;
$('.youTubePlayer').attr("height", newHeight);
});
</script>
After a little more testing (ie, me madly waving the iPad around
in the air and doing acrobatic contortions in the process) we have
established that the video now resizes gracefully when the device
is rotated to Portrait or Landscape mode. All is better in
the world.
Side note: While playing around with this, I
had a javascript alert(newHeight); line in the
resizing code. on my iPad with the shiny new iOS 4.3.1
installed just last night, this promptly caused the application to
crash. I've submitted a bug report to Apple, and we'll see
how it goes.
As always, comments and suggestions are always welcome.