在移动设备上的 iframe 填充浏览器中制作视频

Question

您好，我创建了一个非常简单的页面来播放我拥有的由 wistia 托管的视频。这工作得很好，我让它填满了浏览器 window。但是我想知道是否有人可以告诉我如何让视频填充移动设备上的浏览器，即使它溢出以保持比例并且只是视频显示的一部分。我不介意，因为它可以作为背景。

提前致谢

CSS 在头部部分

<script src="//fast.wistia.net/assets/external/E-v1.js"></script>
<style type="text/css">
        body, html
        {
            margin: 0; padding: 0; height: 100%; overflow: hidden;
        }

        #content
        {
            position:absolute; left: 0; right: 0; bottom: 0; top: 0px; top: -15px;
        }
    </style>

HTML 在正文部分

<div id="content">
        <iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe>
    </div>

Answer 1

您是否尝试过向 css ID 添加 "content" 最小高度？

#content {
    min-height: 1920px;
    min-width: 1108px
}

通过这种方式，视频大小应该可以扩展到移动设备的完整尺寸。让我知道它是否有效。

在移动设备上的 iframe 填充浏览器中制作视频

Making a video in an iframe fill browser on mobile device

html

css

video

iframe

mobile-devices