html - 将视频放入 iframe 中，宽度为 100% 并自动播放

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 完全相同的方式使用react。下面是我的 Wideo iframe，有人可以告诉我如何尝试，但似乎无法正确处理。

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

Answer 1

全宽视频有点棘手。没有放之四海而皆准的方法，但要点如下:

1. 创建一个包含 percentage-based padding-top 的包装 DIV(注意:该值会根据您的情况而变化 - 您需要使用这个值，获取一个计算器，使用开发工具……你会弄明白的)。
2. 将 iframe 置于 DIV 中的 absolute 位置，顶部和底部设置为 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、将其上传到我的服务器并在代码中引用它更快地计算填充...但这就是我。