我目前在我的网站中嵌入了一个 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>
如您所见,我打开了自动播放功能,并且还使用上面的代码将其调整为全宽。我的问题是我刚刚在 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>
最佳答案
全宽视频有点棘手。没有放之四海而皆准的方法,但要点如下:
- 创建一个包含 percentage-based
padding-top
的包装 DIV(注意:该值会根据您的情况而变化 - 您需要使用这个值,获取一个计算器,使用开发工具……你会弄明白的)。 - 将 iframe 置于 DIV 中的
absolute
位置,顶部和底部设置为 0 - 将 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、将其上传到我的服务器并在代码中引用它更快地计算填充...但这就是我。
关于html - 将视频放入 iframe 中,宽度为 100% 并自动播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27490383/