TED Fullscreen Video Multiple Monitor Userscript: Yay!

I like to think that I can hack out JavaScript as good as any web developer, but occasionally I still fall into rookie mistakes. For instance, I totally forgot to test my last userscript for fixing Slashdot articles while zooming in anything but my default browser (Google Chrome). In theory it should have worked with Greasemonkey, but when I tried testing it today using Firefox it failed miserably. Luckily with a few code changes I was able to update the script and get it to work with both Firefox and Google Chrome as well as fix a huge bug when visiting Slashdot’s main page as a non-registered user (another thing I probably should have tested!).

Considering that it was my first attempt at a user script I am not too upset and will chalk it up to experience. Tonight my plans for the evening fell apart, so I decided to try and fix a big pet peeve of mine: no multiple monitor support for video players on certain websites. Maybe I am the only one that thinks this is a problem, but I hate it when websites have a Flash or Silverlight video player embedded onto their page and don’t have an option to enlarge the video or open it in a pop-out window. Most people do fine using the fullscreen mode built into the player, but both Silverlight and Flash fail at fullscreen with multiple monitors since they will exit fullscreen as soon as you try and click on something outside the video (for security purposes apparently). This means you can either stop multi-tasking and only watch the video or you have to settle for a small video player that is absolutely tiny on anything larger than 1024 resolution width. For instance: here is a video that a friend brought to my attention as viewed on a 1600x900 LCD TV.

That is a lot of white space going to waste, and while the fullscreen mode works I often watch videos on the LCD TV while browsing the web on a projector connected to the same computer and end up switching in and out of fullscreen mode multiple times. I’ve had this same problem before with Channel9 and fixed it using a bookmarklet, but that actually requires clicking a link in my favorites every time I loaded a video, which was less than ideal. Now that Chrome supports userscripts I am working on converting some of the bookmarklets that I have into userscripts, and since I already have a working solution for Channel9 I thought that I would try creating one for TED.com next.

So if you ever watch TED videos on a machine with multiple monitors then today is your lucky day.  This userscript will enable multiple monitor fullscreen video for any page that uses the TED.Com flash player. Videos that are embedded from YouTube currently are not supported, but YouTube already lets you increase the width of the player, open it in a pop-out window, or even use the browser’s zoom feature to resize the video so that shouldn’t be a problem. And this time I did do some basic testing in both Firefox and Chrome so hopefully it will work as advertised.

Enjoy!

Slashdot Zoom Fix: a Greasemonkey and Chrome compatible userscript

One of my top ten visited websites is probably Http://www.slashdot.org who’s headline is “News for nerds, stuff that matters”. The site usually posts over 20 stories a day covering technology, math, physics, and computer related topics, which help me keep informed and entertained. One problem that I often have is that the text size is very hard to read when using a high resolution monitor or when using the projector that I have setup on a media center computer at home. Usually this is easy to solve, since one of the 11 buttons on my mouse is mapped to the CTRL button and can be combined with the scroll wheel to zoom in and out on web pages quickly. However in this case there are boxes on the right hand side of the screen that also enlarge when the page is zoomed, causing the text width to be smaller and more difficult to read. Here is an article on Slashdot normal and zoomed:

Normal

Zoomed

The site is designed using CSS and for some reason the advertisement and “Interviews” box will get bigger when the page is zoomed, shrinking the width of the textbox significantly. If you are a registered user Slashdot will not display the ad but will still have a side panel on the right that grows larger when you try and zoom in. I initially created a bookmarklet that could be used to remove the side panel by clicking on a link in my favorites to inject some javascript into the webpage to alter the CSS classes, but that still required that I manually click the button every time that I visit he website.

I planned on making a Google Chrome Extension, but recently Chrome announce that they now will automatically convert Greasemonkey scripts into Chrome Extensions. This means you can write a cross-browser compatible script that can run in Firefox, Chrome or any other browser that supports Greasemonkey scripts. It only took a few minutes to convert the bookmarklet into a userscript, and I posted it on userscripts.org so that anyone can use it. The script will automatically remove the sidebar so that zooming works much better. You can even change the script to automatically zoom a specified amount, however I left this off by default since the right amount highly depends on the width of your screen. Here are the results:

Normal

Zoomed

 

Hopefully someone else will find this useful. I have a few other bookmarklets that I use and will probably convert into userscripts soon, as well as a few new ones that I want to work on when I get some free time.