Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthormaditya
    • CommentTimeAug 6th 2007
     
    I've a Mootools modal window (smoothbox) that displays a flash movie using SWFObject. I've added two variables (videoHeight and videoWidth) to the script, but they don't work when I tried it in IE7. In FF and Safari, the video size is rendered according to the values specified. Can someone help me?

    var videoHeight = 245;
    var videoWidth = 315;

    var video = new SWFObject("swf/qvc_video_player.swf", "Video 2", videoWidth, totalHeight, "8", "");
    videoInl.addVariable("videoHeight", videoHeight);
    videoInl.addVariable("videoWidth", videoWidth);
    • CommentAuthorphilip
    • CommentTimeAug 6th 2007 edited
     
    you have a bunch of mismatched code.

    your SWFObject instance's ID ("Video 2") can't have any spaces. you should change to "Video2"

    your variable names don't match

    var video = new SWFObject("swf/qvc_video_player.swf", "Video 2", videoWidth, totalHeight, "8", "");
    videoInl.addVariable("videoHeight", videoHeight);
    videoInl.addVariable("videoWidth", videoWidth);


    should be

    var video = new SWFObject("swf/qvc_video_player.swf", "Video 2", videoWidth, videoHeight, "8", "");
    video.addVariable("videoWidth", videoWidth);
    video.addVariable("videoHeight", videoHeight);


    since your SWFObject instance is named 'video' and your height variable is 'videoHeight'.

    you should also define the DIV size in your CSS to ensure it will display properly


    #flashcontent {
    width: 315px;
    height: 245px;
    }


    - philip
    • CommentAuthormaditya
    • CommentTimeAug 6th 2007
     
    Hi,
    I've changed the instance name to 'video' and added the size in the CSS but IE7 still shows the players smaller than the dimensions specified. What else could be the issue?
    • CommentAuthorphilip
    • CommentTimeAug 6th 2007
     
    unless you provide full page code or a link to your page (the preferred method), we can't really do more than guess...
    • CommentAuthormaditya
    • CommentTimeAug 6th 2007
     
    Here's the code. Do you see something that I missed? Thanks!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Video on Modal Window</title>

    <link rel="stylesheet" type="text/css" media="all" href="css/smoothboxtabs.css" />

    <style type="text/css">
    #overlaywrap { display: none; }

    #movieoverlay {
    width: 535px;
    height: 476px;
    }
    </style>

    <script type="text/javascript" src="js/mootools.v1.11.js"></script>
    <script type="text/javascript" src="js/smoothbox.js"></script>

    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/test.js"></script>

    </head>
    <body>

    <!-- begin overlay -->
    <div id="overlaywrap">

    <div id="movieoverlay"></div>

    </div>
    <!-- end overlay -->

    <a href="#TB_inline?height=524&width=596&inlineId=overlaywrap" class="smoothbox" title="">Launch</a>
    </body>
    </html>

    Here's what's in test.js:

    window.addEvent("domready", function(){

    var videoHeightO = 441;
    var videoWidthO = 535;
    var totalHeightO = 476;

    var videoOvy = new SWFObject("swf/video_player.swf", "Video2", videoWidthO, totalHeightO, "8", "");
    videoOvy.addVariable("totalHeight", totalHeightO);
    videoOvy.addVariable("videoHeight", videoHeightO);
    videoOvy.addVariable("videoWidth", videoWidthO);

    videoOvy.write("movieoverlay");

    });
    • CommentAuthorphilip
    • CommentTimeAug 6th 2007
     
    on the surface, everything looks fine.

    my guess is that it's a CSS issue... check the dimensions for 'overlaywrap' and its parents (inheritance looms large in CSS).

    for testing purposes, i'd do the following:

    1. remove the SWFObject code. this eliminates javascript conflicts that may be caused by SWFObject (however unlikely) and also eliminates any potentially funky Flash behavior, such as z-index issues and whatnot.

    2. use a PNG, GIF or JPG as content for the 'movieoverlay' div. the image should be the same dimensions as the SWF (535x476).

    3. configure your CSS and smoothbox code to display the image as desired (how the SWF would look).

    4. once the image is working, remove the image and try hard-coding the SWF using the traditional Adobe embed.

    5. if the traditional embed is working, try swapping it out with SWFObject and see if it causes any errors.

    these steps will help you identify where the issue really lies.

    good luck
    - philip
    • CommentAuthormaditya
    • CommentTimeAug 6th 2007
     
    I checked the dimensions for overlaywrap, it's fine. The parent of that div is the body tag.

    I also tried the steps. I got through the first 3 steps. On step 4, when I hardcoded the SWF using the traditional method (see below), it was only able to go up to certain size, smaller than 535x476 (in both browsers). It seems like something is constraining it. I'm confused.

    <div id="movieoverlay">
    <object width="535" height="476"><param name="movie" value="swf/video_player.swf"></param><param name="wmode" value="transparent"></param><embed src="swf/video_player.swf" type="application/x-shockwave-flash" wmode="transparent" width="535" height="476"></embed></object>
    </div>
    • CommentAuthorAran
    • CommentTimeAug 6th 2007
     
    So what are you doing inside flash with the variable values? Are you doing any calculations / resizing internally?
    • CommentAuthorzhangsisi
    • CommentTimeOct 1st 2007
     
    find love best www.ConnectAsia.info/en/lang104082about_sisi11 welcome you