Question

任何人都可以帮助我解决我在使用100％ - 350px布局嵌入vimeo视频时遇到的问题吗？

这里似乎忽略了右边距属性，并且布局溢出到右边。我希望这是一个简单的错误，但似乎我已经尝试了一切。我的时间不多了。

非常感谢帮助。

的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（vimeo嵌入代码已重新格式化以进行验证）：

<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>

编辑：我尝试过的另一个解决方案：

<!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>

编辑：我正在使用此线程中此类定位的解决方案：How can I do width = 100% - 100px in CSS?

Answer 1

元素的宽度不一定会阻止元素中包含的元素溢出该元素。

如果您希望DIV外的内容不显示，请将其溢出设置为隐藏：overflow: hidden。

说实话，我甚至不确定我是否正确理解你的问题。如果我完全误读你的话，澄清你实际希望实现的目标可能会有所帮助。

以下编辑

你的方法有点奇怪，试试这个：

<div id="container">
    <object> ... </object>
</div>


<style>
  #container { position: absolute; right: 5px; }
</style>

此外，您正在尝试使用CSS调整视频大小 - CSS不会对对象产生任何影响。如果您要更改为video { width: 50px; }，则不会将视频调整为50px。

Answer 2

为了使视频更小以停在屏幕的右侧（适合屏幕），您必须删除一些100％属性并进行一些编辑。这是新的CSS和HTML。

CSS

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

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

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

HTML

<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>

编辑正如Emile正确指出的，出于某种原因，只有在您没有为文档设置DOCTYPE时，这才有效。否则它适用于Chrome，但Firefox会显示空白屏幕。经过一些测试后，我得出结论，这与视频对象的百分比宽度有关。 Firefox不支持。

由于Vimeo（与YouTube不同）不允许传递URL参数来确定视频大小，并且百分比宽度显然有怪癖，我唯一的另一个建议是在视频对象上指定固定的宽度和高度（{ {3}}），将内容DIV的可见性设置为不可见，使用Javascript或jQuery函数确定页面宽度，相应地更改OBJECT标记的width / height属性，并将对象再次设置为可见。它不是很整洁，但它可能会起作用，它将独立于doctype。

编辑我已经实施了此解决方案，它适用于所有浏览器。请参阅我单独的新答案。

Answer 3

非常感谢Erik和littlegreen。我发现了这个问题。如果你想这样做，似乎你不能使用DOCTYPE。我刚拿出它运行的Doctype和xmlns。奇怪但有效。

Answer 4

这是一个jQuery解决方案，适用于多个doctypes以及Chrome，Firefox和IE。 IE可能会显示一个空白页面，但这是一个Vimeo问题，可以通过更新IE浏览器插件here和very extensively here来解决。

我还有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>

右边距问题与css 100％ - 350px布局

4 个答案: