Home/ Questions/Q 589001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T15:22:40+00:00

could anyone please help me with a problem I have been having with a

  • 0

could anyone please help me with a problem I have been having with a 100% – 350px layout for embedding vimeo video?

It seems like the right-margin property is getting ignored here, and the layout is overflowing to the right. I’m hoping this a simple mistake, but seems like I’ve tried everything. I’m running out of time.

Help would be really appreciated.

css:

#container {
 position:absolute;
 width:100%;
    height:100%;
}

#content {
 width:100%;
 height:100%;
 margin-left:350px;
 margin-right:350px;
}

.video {
 padding:0 0 0 0;
 height:100%;
 width:100%;
}

html (the vimeo embed code has been reformatted for validation):

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
     <div style="clear:both; height:1px; line-height:0">&nbsp;</div>
  </div>
</div>

EDIT:
Another solution I have tried:

<!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=utf-8" />
<style>
#container {
    position:absolute;
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
}

.video {
    padding:0 0 0 0;
    width:100%;
    height:100%;
}
</style>
</head>

<body>

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
  </div>
</div>

</body>
</html>
</head>

Edit: I’m using the solution for this type of positioning from this thread: How can I do width = 100% – 100px in CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a jQuery solution that works with multiple doctypes and in Chrome, Firefox and IE. IE will possibly show a blank page, but this is a Vimeo issue and can be solved by updating the IE flash plugin as discussed here and very extensively here.

    I have also placed the code online.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">

    jQuery(function($){
        $(window).load(function() {
            var h = $(window).height() * 0.9;
            var w = $("#content").width();
            $(".video").width(w);
            $(".video").height(h);
            $("#content").css('visibility', 'visible');
        });
    });

</script>
<style type="text/css">

#container {
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
    visibility: hidden;
}

</style>
</head>
<body>

<div id="container">
    <div id="content">
        <object class="video" width="400" height="225">
            <param name="allowfullscreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
            <embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
        </object>
    </div>
</div>

</body>
</html>
    • 0