Question

Hi I'm trying to wrap a Youtube video in a container with auto margins, then apply 2 images as a kinda border to the immediate left and right with :before and :after. The result should be that the browser windows centres on the video, but when the browser window is expanded then the images to the left and right are revealed.

Pretty sure I'm going wrong on the positioning. I'm not even sure if :before and :after is the best way to achieve this. All suggestions to get the desired outcome are welcome.

EDIT: The left image's right edge should always line up with the left edge of the video, and vica versa for the right side image (left edge lines up with right edge of video), so they sort of act like inline-block elements. Could this be achieved with a background image behind the entire video maybe?

Here's my html:

<div class="container">
   <iframe id="ytplayer" type="text/html" width="960" height="540"
    src="http://www.youtube.com/embed/orosuMZsn7I?autoplay=0&origin=http://example.com"
    frameborder="0"/>
   </iframe>
</div>

and my css:

<style>
.container {
    width: 960px;
    height: 540px;
    margin-left: auto;
    margin-right: auto;
}
.container:before {
    content: url(img/surround_02.jpg);
    height: 540px;
    width:211px;
    position:absolute;
}
.container:after {
    content: url(img/surround_03.jpg);
    height: 540px;
    width:218px;
    position:absolute;
}
.container iframe {
    position:absolute;
}
</style>

Answer 1

这是一个有趣的情况，所以我玩了一下并想出了这个：

http://jsfiddle.net/fusuhga6/2/

相当简单的HTML结构和CSS：

#Container具有百分比宽度（100％），加上px中的最大宽度等于youTube iFrame的宽度加上两个图像的宽度的总和。它的margin: 0 auto使其在浏览器窗口或周围容器的水平位置居中。这两个图像包含在该容器的两个背景图像中，一个对齐左，另一个右对齐（顶部）。所有元素都具有相同的高度。

Youtube-DIV的大小是固定的（在小提琴示例中为250px x 200px）。它还有margin: 0 auto在#Container中水平居中。

关于这种方法的好处：在较大的窗口中，整个事物以其全宽（Youtube + 2图像）为中心。当窗口变窄时，首先左右空的空间缩小。一旦#Container跨越窗口的整个宽度并随窗口变窄，YouTube框架就会保持居中，图像变得越来越窄。

Hmmmm。

Answer 2

很难想象最终目标，但这里有几件事可能会有所帮助。

首先，要真正利用CSS的绝对定位，包含元素应该是position：relative;这有点令人困惑，但您的绝对定位是相对于最近的父元素。 This article by Chris Coyier on CSS positioning is very helpful。元素的默认位置是＆＃34;静态＆＃34;因此，除非您将另一个元素声明为相对元素，否则绝对定位可能无法响应您的需求。在这种情况下，您可以安全地使.container position：relative。

其次，只需在标记和CSS中进行一些清理，在首次声明iframe时，您就会使用自动关闭的<iframe>标记。你应该删除那个错误的＆gt;只需使用＆gt;，然后就可以使用</iframe>。目前，您正在使用/＆gt;关闭iframe然后又关闭它。我认为这只会导致语法错误，但仍然......清理它并不会有什么坏处。

<div class="container">
   <iframe id="ytplayer" type="text/html" width="960" height="540"
    src="http://www.youtube.com/embed/orosuMZsn7I?autoplay=0&origin=http://example.com"
    frameborder="0">
   </iframe>
</div>

（从 frameborder =＆＃34; 0＆＃34; /＆gt; 之后删除了斜线）

最后一点清理是你可以重新编写保证金声明作为保证金：0 auto; （或者如果你想要一些上边距，添加它代替0）。如果你想像像时钟一样的边缘和填充等CSS声明，那么：

margin: 10px 30px 5px 25px;

装置

margin-top: 10px;
margin-right: 30px;
margin-bottom: 5px;
margin-left: 25px;

如果您在第一次声明后没有填写任何值，那么它们都会继承该声明。所以：

margin: 5px;

将渲染结束为：

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

如果你宣布前两个：

margin: 5px auto;

然后它将呈现为：

margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;

无论如何，这些都不能真正回答你的问题，但是如果你能给出一个链接或专门模仿你想要做的事情，那么它可能有助于解决这个问题。

Answer 3

好的，既然这个问题已被编辑，以至于我以前的答案再也不合适了，我想出了一个新的解决方案： http://jsfiddle.net/fusuhga6/3/

再次，非常简单：
一切都在DIV中，其中包含Youtube视频，其中包含

`position:relative` 
`margin: 0 auto`

以水平居中。

这两个图像是两个绝对定位的DIV中的背景图像，这些DIV是 in #youtube DIV，但是这样定位：

#leftPic, #rightPic {  
  position: absolute;
  width: 90px;
  height: 200px;
  }
 #leftPic {
   left: -90px;
  background: url(http://placehold.it/90x200) no-repeat top right;
 }
  #rightPic {
    right: -90px;
  background: url(http://placehold.it/90x200) no-repeat top left;
 }

所以他们的左/右偏移对应于它们的（固定）宽度。由于它们附加到#youtube DIV，因此整个组都将居中。

现在，当窗口变得比这三个块一样窄时，＃youtube DIV保持居中，其他两个像以前一样保持对齐，其_outer_parts被切断。

那应该符合你的标准......

Auto-margin container with image :before and :after as container left/right border?

3 个答案: