为什么我的iFrame不会像我需要的那样扩大？

Question

我的页面上有一个滚动条，我将youtube和vimeo视频链接到其中。这些视频显示效果很好，但iFrame的尺寸已关闭，我不知道为什么会发生这种情况。

HTML：

<!-- section that contains all pics -->
<section id="wrapper" class="wrapper">

    <article class="post">
    <p><iframe width="853" height="480" src="http://www.youtube.com/embed/0a9meMkn4Go" frameborder="0" allowfullscreen></iframe></p>
    </article>

    <article class="post">
    <p><iframe src="http://player.vimeo.com/video/76815334?title=0&amp;byline=0&amp;portrait=0" width="853" height="480" frameborder="0" 

webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a     href="http://vimeo.com/76815334">Beautiful Filth Bears Strange Fruit</a> from <a 

href="http://vimeo.com/kahlone">Kahleem Poole-Tejada (KahL-One)</a> on <a     href="https://vimeo.com">Vimeo</a>.</p></p>
    </article>

    <article class="post">
    <p><iframe width="853" height="480"     src="http://www.youtube.com/embed/YEiK6ymugrw" frameborder="0" allowfullscreen></iframe></p>
    </article>

    <article class="post">
    <p><iframe width="853" height="480" src="http://www.youtube.com/embed/rx6k65W5ScE" frameborder="0" allowfullscreen></iframe></p>
    </article>

</section>
<!-- close section -->

对应的CSS：

/* main content - scroller
------------------------------------------------------------------- */  

#wrapper {
   float:left;
   margin:110px 0 0 0;
   padding:0 0 0 250px;
   background:#fff;
   position:relative;
   z-index:2;
   border-bottom:solid 20px #fff;
}

#wrapper img {
   color:#fff;
   width:auto;
}

#wrapper iframe {
   color:#fff;
   width:auto;
}

.post {
   padding:0 10px 0 0;
   background:#fff;
   height:100%;
}

我不知道为什么我会失踪。当我在相同的配置中使用图像时，它们根据需要完美地调整大小。想法？

Answer 1

#wrapper iframe {
   color:#fff;
}

您的width:auto正在破裂。尝试在这里查看：

http://jsfiddle.net/Mbz9z/1/