jquery - 为什么我的 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/