Dan Herbert's

A while back, I created a bookmarklet to make YouTube videos full screen, and get around Adobe’s awful decision to require full screen flash videos to always have focus.

Since that posting, YouTube has added the “pop out” button to all of their videos. My previous bookmarklet is now obsolete, however since other flash-based video sites haven’t made a comparable feature to YouTube’s I’ve made another Full Screen flash bookmarklet, but this time, it has to work in any flash video site.

To recap why I don’t use the built-in full screen button on flash videos, it’s because on a dual-monitor setup, flash must always have focus in full screen mode or else it reverts back to normal size. I want to be able to watch flash movies and do other stuff at the same time. To overcome this, I make the flash video expand to the size of the browser window and then use the browser’s full screen feature.

I’ve tested it in YouTube.com, TheDailyShow.com, blogtv.com, Vimeo.com, Viddler.com, TwitVid.com, and Hulu.com. The only site that doesn’t seem to work properly is Hulu (it “works”, but doesn’t go fullscreen), however, since Hulu has its own popup window button, this is not really relevant.

To get it, drag this link into your bookmarks toolbar. You can use this bookmarklet to undo the effects of the video embiggening if you want. When you use the bookmarklet, it will search the page for any flash objects that look like they are videos, outline the video, and add a link that will embiggen the video when clicked. To make the video full screen at this point, just use the full screen feature of your browser (usually F11). Unlike my previous bookmarklet, this will simply expand the size of the flash object on the page. It does this for reasons I’ll explain below.

Here is a breakdown of what the bookmarklet does:

1. Load jQuery from Google’s AJAX Libraries CDN. Since including jQuery within the bookmarklet itself seemed like overkill, this was the simplest alternative.
2. Once jQuery is loaded, the bookmarklet traverses the page looking for any object or embed tags.
3. These elements are then inspected to determine if they are videos. I don’t do anything very sophisticated to check if they are videos. All I do is check the height of the video. If the height of the video is greater than 250 pixels, then it can be assumed that the object is a video.
4. Create a “Go Fullscreen” element, which is positioned at the same location of the video. This somewhat difficult to do because of how flash videos render on the page in certain cases.
   Flash videos can’t be wrapped with a tag, because some flash objects’ height is not reported as their true height, so the wrapper would end up getting rendered behind the flash object in this case.
   Instead, I created a container element, checked for the “true” height of the video, and then appended the container element to the bottom of the page, and absolutely positioned it so that  it would appear to wrap around the video. This has worked well for all of the sites I’ve tested the bookmarklet on.
   I use the “external site” icon from Wikipedia for the “Go Fullscreen” link. Since bookmarklets don’t exist on any specific domain and I don’t want to host the image myself, I chose to hotlink to Wikipedia and hope that they don’t mind me borrowing their icon since it’s Creative Commons licensed.
5. When the “Go Fullscreen” link is clicked, any “Go Fullscreen” outlines on the page are removed. After this, the flash object is given a fixed position and made to have 100% height and width. In all sites I’ve tested this on, it works flawlessly (except for Hulu as stated above).My original approach was to create a popup and append a clone of the flash video inside the popup window. This didn’t work well because certain flash video players become upset when you embed them into an empty page. I never found out the exact reason (that would require me to reverse engineer minified JavaScript to be 100% certain), I can assume that it has something to do with other markup on the page that the flash video relies on, or JavaScript objects that the flash video needs to be able to call. The approach I chose instead is guaranteed to work because it never takes the tag out of the page and it never removes it from the hierarchy of the page, it just re-styles its look. That’s the magic of browser MVC! I only altered the view, not the model, so it works.
6. For undoing this entire process (in my undo bookmarklet), I store the ID  (the bookmarklet generates a unique ID if one doesn’t exist) and original state of the flash video element in the window object. When the undo bookmarklet is clicked, this state is retrieved and set back to the flash video.

That’s a rough breakdown of how the bookmarklet works.

I’ve published the source to the bookmarklet on GitHub for those who are interested in seeing exactly what happens in the bookmarklet or if you want to tinker around with it.

The bookmarklet was created on a Windows machine and uses a batch script that uses the YUI JavaScript compressor to prepare the bookmarklets. If you want to build the bookmarklets yourself, you’ll have to download YUI Compressor and make sure the “package.bat” file is configured to point to the correct location for the YUI Compressor.