原理说明：

（缩放窗口查看效果）

            
CSS：
            
                .wrap {
                    width: 400px;
                    margin: auto;
                    border: 5px solid greenyellow;
                }

                .iframe-container {
                    height: 0;
                    padding-bottom: 97.6%;
                    position: relative;
                }

                .iframe-container iframe {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }

                @media screen and (max-width: 500px) {
                    .wrap {
                        width: 300px;
                    }
                }
            
            
HTML：
            
                <div class="wrap">
                    <div class="iframe-container">
                        <iframe height="498" width="510" src="http://player.youku.com/embed/XOTE0MjkyODgw" frameborder="0" allowfullscreen=""></iframe>
                    </div>
                </div>
            
        

iframe元素本身并无法伸缩，除非通过js显示的设置其宽度。但是我们可通过一个iframe-container元素来包裹iframe，同时让iframe-container元素的宽度充满包含块的宽度，并且根据iframe的高度与宽度比，设置iframe-container元素的padding-bottom百分比。

其实，这种方式的精髓就在于设置iframe-container元素的padding-bottom属性。设置该属性的目的在于变相的设置元素的高度，因为给padding-bottom设置百分比，在水平（默认）书写模式下，是相对于父元素的width计算值的，如果对height属性设置百分比，则相对于父元素的height，而父元素的height值我们通常使用默认的auto，因此会出现子元素height也为0。因此，我们只能通过设置padding-bottom属性来设置iframe-container元素的高度。这样，只需让iframe元素充满iframe-container即可。