将视频放入100%宽度和自动播放的iframe中

Question

我目前在我的网站上嵌入了vimeo视频.(以下代码)

<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

正如您所看到的,我已经自动播放,并且它也使用上面的代码调整到全宽.我的问题是我刚刚在wideo.co上创建了一个视频,我需要它以与上面的vimeo iframe完全相同的方式做出反应.下面是我的Wideo iframe,有人可以告诉我如何尝试和尝试,但似乎无法做到正确.

<iframe width="540" height="310" src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500" frameborder="0"></iframe>

Answer 1

全宽视频有点棘手.没有一个尺寸适合所有人,但这里是它的要点:

1. 创建一个基于百分比 的包装DIV padding-top(注意:该值将根据您的情况而变化 - 您需要使用此值,获取计算器,使用开发工具......您将弄明白).
2. 定位absolute在DIV内的IFRAME,具有顶部和底部设置为0
3. 将iframe宽度和高度设置为 auto

这是一些代码:

<style>
.video-wrapper {
    position: relative;

    /* 
     Play with this value until you get the right aspect ratio.
     Note: Percentage based padding is calculated by the width of the containing element.
     Note 2: This value will be different for every website and/or media query...
    */
    padding-top: 45%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* this will override the width=""/height="" properties defined on the iframe */
    width: auto;
    height: auto;
}
</style>

<div class="video-wrapper">
    <iframe src="..."  width="540" height="310"></iframe>
</div>

如果你很懒,你也可以前往fitvidsjs处理创建包装DIV并为你计算填充.它是一个很棒的代码,工作得很好,不需要计算器.我可以比我下载最新的fitvids更快地计算填充,将其上传到我的服务器,并在代码中引用它......但那就是我.