让iframe嵌入的视频自适应 （100%宽度）？

移动端自适应高度

我们需要像这样把它包在一个container里：请注意类名，并且移除宽和高度属性。

<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

使用以下css样式：

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

原理: container元素赋值了一个0值的高度和一个百分比的 bottom padding， 这个百分比的bottom padding 百分比是和容器宽度的百分比

,这就得到了一个固定的宽比率。但是为了让这个iframe显示在这个0高度的container里面，你需要设置container定位为relative，并将div里面的iframe的定位设置成absolute.

pc端自适应

css部分

.iframe{
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

html部分

<iframe  frameborder=0  width=100% height="640px" src="......"  allowfullscreen></iframe>

js部分

<script>
    $('iframe').wrap('<p class="iframe"></p>')
</script>