将视频以 100% 宽度放入 iframe 并自动播放

Posted 2023-03-05

【中文标题】将视频以 100% 宽度放入 iframe 并自动播放

【英文标题】：Put video in iframe with 100% width and autoplay

【发布时间】：2015-02-13 22:09:21

【问题描述】：

我目前在我的网站中嵌入了一个 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"   frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

如您所见，我开启了自动播放功能，并且还使用上面的代码将其大小调整为全宽。我的问题是我刚刚在wideo.co 上创建了一个视频，我需要它以与上面的vimeo iframe 完全相同的方式做出反应。下面是我的 Wideo iframe，有人可以告诉我我是如何尝试的，但似乎无法做到正确。

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

【问题讨论】：

它在 SO 上的工作方式是，如果有人给你一个答案，你“接受”它作为一个解决方案，或者你评论一个特定的答案，直到达到一个足够的解决方案......此时你接受它。

【参考方案1】：

将内容放在 div 中，然后将 添加到 iframe 代码中。为代码添加自动播放功能。

<div style="overflow: hidden;">
<iframe src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500&autoplay=1"   frameborder="0"></iframe>
</div>

【讨论】：

为什么？看不出问题。如果您需要向 iframe 添加其他标签和描述 - 去吧，它不会破坏代码。

能否提一下我目前在 标签中拥有它

此代码不会保持视频的纵横比，并且始终只有 310 像素高。还有两个width属性，只是imo编码不好。

抱歉，忘记原来的宽度了。

【参考方案2】：

全宽视频有点棘手。没有万能的，但这里是它的要点：

创建一个具有基于百分比的 padding-top 的包装 DIV（注意：该值会根据您的情况而变化 - 您需要使用此值，获取一个计算器，使用开发工具。 ..你会弄明白的）。 在DIV中定位absolute iframe，顶部和底部设置为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 / properties defined on the iframe */
    width: auto;
    height: auto;

</style>

<div class="video-wrapper">
    <iframe src="..."   ></iframe>
</div>

如果您比较懒惰，也可以前往 fitvidsjs，它会为您创建包装 DIV 并计算填充。这是一段很棒的代码，工作得很好，不需要计算器。我可以比下载最新的 fitvids、上传到我的服务器并在代码中引用它更快地计算填充...但那就是我。

【讨论】：

autoplay=1 静态视频无法播放怎么办？

如果提供者支持，自动播放应该仍然有效。 html5 视频支持自动播放，大多数视频托管服务提供商也应如此。