I have a kiosk that I’m preparing for a conference that uses a 27 inch iMac, OSX Lion. The browser is Chrome. I’m using a lightbox to display quicktime videos. The Lightbox I”m using is fancybox.
When a video appears in the lightbox, I’ve programmed the lightbox to be “full screen”, which is the size of the monitor. But the QUICKTIME content is not fullscreen, it’s just a window inside of a very large white lightbox.
When I right click the video, there is a FULLSCREEN option that gives me exactly what I want: the QuickTime content goes full screen, filling up the entire 27 inch Mac screen and it looks beautiful.
What I need is for the video to open fullscreen automatically without having to right click it, since this is for a conference and the users can’t keep right clicking videos to make them work right.
Here is my code:
<div id="videocontainerone" style="display:none; position:relative; top:0px;">
<object width="2560" height="1240">
<param name="movie"
fullscreen="full"
quitwhendone="true"
value="videos/one.mov">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"> </param>
<embed
src="videos/one.mov"
fullscreen="full"
quitwhendone="true"
allowscriptaccess="always" allowfullscreen="true" width="2560" height="1240">
</embed>
</object>
</div>
The lightbox is opened by js, but my hunch is that what I need is actually tweaking the quicktime settings and/or embed options. But the js to open the video is simple:
in a document.ready I just do :
$(".fancybox").fancybox({
frameWidth: 2560,
frameHeight: 1240,
overlayShow: true,
overlayOpacity: 0.7
});
Any help would be appreciated ! Thank you in advance.
EDIT:
I have tried to create an .htaccess file and a .qtl file , as instructed in this 2006 article:
http://www.kenvillines.com/archives/82.html
and it DOES pull up the movie but still no automatic fullscreen.
Anyone who answers this will get a beer !
Thanks.
So I found the answer. In a nutshell:
Works by putting target videos in display:none divs and using an href to link to #videoone , #videotwo, etc for the various videos, and doing that with the fancybox plugin.
I changed the video format to HTML5 since its running inside of a kiosk.
For the fullscreen effect, I’m using element.webkitRequestFullScreen(); on the html5 video element itself, which still uses the fancybox but puts it fullscreen ( and I mean the VIDEO ITSELF is fullscreen, which is what I wanted ).
I’m posting the code of the entire page here : ( I hope I get the indentation right , I usually don’t post THIS much code, but it’s useful. ) …. Hopefully this will help someone.