html嵌入iframe第三方youku视频并自动播放加视频自适应

1，html嵌入iframe第三方youku视频并自动播放，如何使youku iframe嵌入的视频自适应 （100%宽度）。

一般我们用这样的方式嵌入youku视频:

<iframe height=498 width=510 src='https://player.youku.com/embed/XNTE0NjQxNTU0NA==' frameborder=0 'allowfullscreen' class="video"></iframe>

如果我们能将宽度的数值设置为 100% 会更加方便，但由于高度仍需要指定，因此并不可行，我们需要像这样把它包在一个video-content里：请注意类名，并且移除宽和高度属性。

<div class="video-content">
     <iframe src='https://player.youku.com/embed/XNTE0NjQxNTU0NA==' frameborder=0 'allowfullscreen' class="video"></iframe>
</div>

使用以下css样式：

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

原理: video-content元素赋值了一个0值的高度和一个百分比的 bottom padding， 这个百分比的bottom padding 百分比是和容器宽度的百分比,这就得到了一个固定的宽比率。但是为了让这个iframe显示在这个0高度的video-content里面，你需要设置video-content定位为relative，并将div里面的iframe的定位设置成absolute.

2，如何使你的网页视频自动播放嵌入的iframe视频

只需在视频链接后面接上?rel=0&autoplay=1

<iframe src='https://player.youku.com/embed/XNTE0NjQxNTU0NA==?rel=0&amp;autoplay=1' frameborder=0 'allowfullscreen'></iframe>