Adobe said "no", so I said "yes"

Permalink
I've had a lot of requests since releasing my "YouTube Pro" add-on to add support for full screen mode. The challenge is that this add-on uses the YouTube Javascript API to create the cool chromeless player.

Now the clever folks at Adobe thought it was a good idea (for security reasons) to limit Flash videos/animations from being placed into full-screen mode from outside the file (eg. via a Javascript instruction).

So after a lot of searching for a solution, I've found something that is neat and elegant, and more importantly works pretty well. While it's not "real" full-screen playback, it does now take up the whole browser window and automatically kicks in a HD version of the video if it's available.

Since I've had so many requests for this feature, I thought it would just be easier to make an announcement on the forum like this. I'm not trying to be spammy, just hoping this will help someone who's looking for this type of functionality.

You can see a demo at:
http://c5extras.com/add-ons/youtube-pro/...
(last video at the bottom of the page)

Enjoy!

JB

jb1
 
beebs93 replied on at Permalink Reply
beebs93
I've been using the chromeless YT API along with the same jQuery plugin you use to build my own personal YT embed blocks.

I've never used your block, but I see it has the same problems the demo versions have (http://demo.tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/youtube-player.html).

You may want to address the following issues as they were a thorn in my side for a while:

- After the video has loaded, if you click outside of the play button the video will still play but the event listeners for the controlDIV aren't set up to account for that. Don't bother setting up your own listeners on the flashContainer or block wrapper (they won't work cross-browser); a specific status code is passed when you first play a video (different from the status code passed when pressing play after pausing) - tap into that and you're golden.

- The image for the controlDIV is a CSS background image thus it cannot properly scale with the video size. It's not a big deal to change this to an image then programatically calculate its dimensions dependent on the video's width. The result is a nicer-looking embed for smaller sizes. Even though YT devs have stated that the default play button should have been removed from the chromeless player, they haven't so the image has to maintain a certain percentage width of the video's. I've found a 21.333% (or 16/75) works well.

- While the default behavior of the jQuery plugin is to stop the video at the end and show a replay button, our users have complained that they'd prefer the videos auto-cue to the beginning when completed and show the default placeholder thumbnail. It looks a lot better than a black box with a replay button, however, this is more personal preference so giving the option in the block is a simple implementation.

Finally, congrats on finding a solution to viewing these videos full-screen. I've always wanted to tinker with that, but never had the time.

Cheers

-Brad
jb1 replied on at Permalink Reply
jb1
Thanks Brad, some interesting feedback there. I'll look closer into those things. I'm always interested in ways to make my addons better.