|
Summary:
This post discusses one short-coming of the NBCOlympics.com Silverlight video player and shows a simple CSS tweak you can make to force the video to completely fill the IE7 browser window, even when running full screen on a big monitor.
Stock player before tweaking.
(Fixed-size 848x480 pixel video)
After CSS tweaked to force full-screen.
Some people have criticized [1] [2] aspects of the Silverlight "HD" video player that NBC is using to show the Olympics on the Internet (only available in North America). One of the biggest irritations is that there is no stock way to make the video window fill a large monitor. This has led some people to erroneously suspect this may reveal a technical limitation in Silverlight's ability to "stretch" video.
Since I have been working on my own SL video player demo app, and since I'm interested in SL debugging, I looked at the site's code to see if it could be "coaxed" into full screen mode. It turns out that just changing two lines of CSS styling is all it takes to go full screen. If you only want to see the "how to tweak" details, you can skip the following "why?" section.
Background: Why no full screen mode?
If all it takes to go full screen is changing two lines of CSS, then clearly the fixed 848x480 video window was a deliberate design decision. Why would Microsoft and NBC make that choice? Tom Taylor of Microsoft has offered at least a partial explanation. He says one factor was that when you scale the video to fill a larger screen the compression artifacts are more apparent. That is true. Another, probably more important, factor is: "...restrictions placed on the usage of full screen video by the IOC". Tom says it is "absolutely false" that NBC made the choice out of fear that a "too good" player might undermine their cash cow of conventional TV broadcasts of the Olympics. Whether that's true or not, some early reports suggest the large amount of video on the NBC site actually helps increase the TV audience (at least with a somewhat neutered SL player).
Tom says "most people have 1024x768 monitors or less", but according Browser News, "~91% of page accesses" come from browsers with resolutions of 1024x768 and higher. Even if the average user is still at 1024x768, it isn't that hard to create a liquid layout that adapts as well to 800x600 resolution as to 2560x1600. One of the biggest attractions of Silverlight and WPF for me as a developer is that they are vector based (highly scalable), and have strong support for liquid layouts.
Workarounds:
Regardless of why they chose a "small" fixed layout, how can we get the scalable, full-screen behavior that many of us want?
Simple non-programmer fixes:
Actually, the simplest ways to get full-screen behavior don't require any programming: As discussed in the same silverlight.net forum thread, one solution is to just temporarily drop your display resolution down to 1024x768. The disadvantage is that it also forces the OS and all your other programs down to that low resolution too.
Probably the best fix is to download Firefox 3 (ironic from MS's point of view) and use its "zoom in" mode to expand the Olympics video to full screen. Unfortunately, IE7's own "zoom in" mode has an issue that prevents it from working well in this case. Yes, IE7 will zoom in on the video, but the banner ad on the same page periodically shifts to the right for some reason, pushing part of the video out of view.
More technical fixes:
Since this is a technical blog, and most of us are "devs", we'll look for a more programmer-level fix. Actually, both the following fixes are quite simple once you know what to tweak.
Technique #1: Add a personal style sheet rule:
For this one I just added the following CSS rule to the personal style sheet I use with IE:
#videoPlaybackHost
{ width: 105% !important; /* Stock player uses fixed 1002px */
height: 200% !important; /* Stock player uses fixed 524px */
}
The CSS "id selector" #videoPlaybackHost refers to the DIV element holding the Silverlight control that displays the video. I've replaced the fixed 1002 pixel width with a width of 105%. That makes the video stretch to fill the entire width of the browser window, regardless of how small or large you make it. What a concept! :) Although the 200% height seems odd, that was what worked on my 1600x1200 display. You can tune those percentages, or switch to large fixed numbers like a 1000px height, to suit your particular monitor size.
After you create or edit the custom style sheet, you need to restart IE7. Also, when the smaller browser pop-up window that holds the video appears, you need to press the "ENLARGE VIDEO" button on the player and press F11 to make that browser window border resizable.
Technique #2: Create a "bookmarklet" to tweak the DIV style to full screen:
This second technique was suggested by "slyi" on the Silverlight forums. Although creating a personal style sheet is easy, this is even easier (thanks slyi). I had never created a "bookmarklet" before, but it was simple enough. For those of you who haven't used bookmarklets, the basic idea is to use the text of a little Javascript program as the href address in a hyperlink / bookmark. When you click the link, instead of openning another web page, your few lines of Javascript run.
First create a regular favorite (IE) or bookmark (FF). Then right click on the favorite and select "properties". Now paste the following single long line of Javascript into the URL field:
javascript:var o1=document.getElementById('videoPlaybackHost'); o1.style.width='105%'; o1.style.height='200%';void(null)
Finally, once the video player window is open and you have clicked the "ENLARGE VIDEO" button, you just click the bookmarklet containing the above code and it will force the video to fill the browser window.
One problem is that the video player window normally opens with just a title bar, but no menus and hence no bookmarklets/favorites to click. To get around that in IE7 you can copy the URL at the top of the video window into the address bar of a full browser window. Or just click this URL to a random video to get you into the player. Now your bookmarks menu should be available.
Doing the analysis with IE Developer Toolbar or Firebug:
I used the IE Developer Toolbar (IEDT) add-on with IE to come up with the above simple CSS fix. You can use Firebug on Firefox to do the same thing. IEDT and Firebug both show you the element tree for the host HTML page. You can browse down to the nested DIVs containing the Silverlight control and interactively tweak their CSS styles! 
This screen shows IEDT in action, after I have tweaked the DIV's width and height on-the-fly. And yes, they really do have cheerleaders at the Olympics.
The more conventional "full screen" mode of Silverlight:
Finally, although I like this liquid layout technique for going "full screen", Silverlight also supports a more literal full screen mode, where the Silverlight app can immediately jump to fill the entire screen without any surrounding browser chrome. There is a whole section in the documentation about it. Most other Silverlight video players offer that capability. Like this player sample on CodePlex.
Alan Cobb
|