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

Question

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

提前致谢

头部的 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 {
    min-height: 1920px;
    min-width: 1108px
}

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