Html 将视频放入 iframe 中，宽度为 100% 并自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27490383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put video in iframe with 100% width and autoplay
提问by Rich Weston
I currently have a vimeo video embedded into my website. (code below)
我目前在我的网站中嵌入了一个 vimeo 视频。（代码如下）
<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
As you can see I have autoplay on, and it also resizes to full width using the code above. My problem is I have just created a video on wideo.co and I need it to react in exactly the same way as the vimeo iframe above. Below is my Wideo iframe, can somebody show me how as I have tried and tried but can not seem to get it right.
如您所见，我启用了自动播放，并且还使用上面的代码将其调整为全宽。我的问题是我刚刚在 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>
回答by Ryan Wheale
Full width videos are a bit tricky. There's no one-size-fits-all, but here's the gist of it:
全宽视频有点棘手。没有一刀切，但它的要点是：
- Create a wrapping DIV that has percentage-based
padding-top(note: the value will change depending on your situation - you need to play with this value, get a calculator, use dev tools... you'll figure it out). - Position
absolutethe iframe within the DIV, with a top and bottom set to 0 - Set the iframe width and height to
auto
- 创建一个基于百分比的包装 DIV
padding-top（注意：该值会根据您的情况而变化 - 您需要使用该值，获取计算器，使用开发工具......你会弄清楚的）。 - 定位
absolute在DIV内的IFRAME，具有顶部和底部设置为0 - 将 iframe 的宽度和高度设置为
auto
Here's some code:
这是一些代码：
<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>
If you're lazy, you can also head over to fitvidsjswhich handles creating the wrapping DIV and calculating the padding for you. It's a great piece of code and works quite nicely and does not require a calculator. I can calculate padding faster than I can go download the latest fitvids, upload it to my server, and reference it in code... but that's me.
如果您很懒惰，您还可以使用fitvidsjs，它负责创建包装 DIV 并为您计算填充。这是一段很棒的代码，运行良好，不需要计算器。我可以更快地计算填充，而不是下载最新的 fitvids，将其上传到我的服务器，并在代码中引用它......但这就是我。
回答by mrserge
Put the content in div and then add width="100%" to iframe code. Add autoplay back to code.
将内容放在 div 中，然后在 iframe 代码中添加 width="100%"。将自动播放添加回代码。
<div style="overflow: hidden;">
<iframe src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500&autoplay=1" width="100%" height="310" frameborder="0"></iframe>
</div>
