On our website I am using a shadowbox to view videos hosted on another
site in the product page window. The problem is that recently the
company hosting the videos have started providing several different
size of videos.
All the different video pages, however, have an element with an ID of
container as the only child of the body element (in 2 cases it's a
table, in a third a div, but all have an id of container). I found
that if I can manually resize the shadowbox by getting the clientwidth
and clientheight of the #container element and setting the width and
height of the shadowbox to these values I can get the shadowbox to
perfectly contain the video without excess space.
The problem is that I can't find a way of grabbign the width and
height from within a script and applying the new size. I tried typing
$('#shadowbox_content').content().find ('#container') into the firebug
console and got a permission denied error.
Additionally, the iFrame doesn't exist until the shadowbox opens, so I
need to find a way to get the iframt content when the iframe loads but
to do it wit han iframe that doesn't exist until the containing
shadowbox opens.
Can anyone help?
The only other solution I have it to just make the shadowbox big
enough to hold any video size, but then there's a lot of white space
in the shadowbox when the video is smaller than this. Here are a few
pages that use the shadowbox that show the problem:
http://www.pcwb.com/catalogue/item/A0234261 <- Biggest size
http://www.pcwb.com/catalogue/item/3DCONX01 <- Most 3D Connexion
videos
http://www.pcwb.com/catalogue/item/WAC123 <- Most videos on the site
are this size
