背景小于包含div（可变大小）

Question

我想在嵌入式媒体背后创建略微缩进的背景，其大小各不相同。它应该是这样的：

了解绿色背景如何从YouTube视频的顶部和底部略微缩进？我已经得到了所有其他东西以显示我想要的，我只是无法弄清楚如何在嵌入的媒体项目内略微定位背景。特别是因为我知道媒体项目的大小会发生变化。

您可以在JSfiddle上查看到目前为止的内容。

Answer 1

像这样写：

.framewrap {
    text-align: center;
    background-color: #edf3dd;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    height:400px;
}
.frame {
    border: 5px solid #FFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
    left: 50%;
    margin-left: -320px;
    position: absolute;
    top: -30px;
}

选中此http://jsfiddle.net/9qeP3/1/

Answer 2

首先，我不是jQuery大师，但我找到了解决问题的方法。

// Gets the height of the video
var dynHeight = $('iframe').height();

// Removes 40 pixels from the height of the container sets it to a trimmed variable
var trimmed = dynHeight - 40;

// Sets the height of the container to the trimmed variable
$('.framewrap').height(trimmed);

然后在你的CSS文件中使用负边距来获得所需的效果。

.frame { margin-top: -20px }

以下是JSFiddle Version

Answer 3

简单给出负余量，如

iframe { margin-top: -10px; }

DEMO