如何使嵌入视频在移动设备上响应

Posted 2023-03-21

【中文标题】如何使嵌入视频在移动设备上响应

【英文标题】：How to make embed videos responsive on mobile

【发布时间】：2021-10-10 05:45:03

【问题描述】：

我想知道如何使我的嵌入视频在移动视图上响应？

这是我的桌面视图代码，但是如何使这个视频适合移动视图

        <div class="embed-responsive embed-responsive-16by9">
          <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="embed-responsive-item">
            <source src="example.mp4" type="video/mp4"/>
          </video>
        </div>

这是视频的移动视图，我想让它适合移动端

我希望你们能理解我的问题。感谢您回答这个问题

【问题讨论】：

看不到您的 css 代码，我们无法帮助您，请阅读minimal reproducible example

我很抱歉这个问题@Sfili_81，但我没有在我的 css 中添加任何代码，我只是使用引导响应代码

【参考方案1】：

我发现让视频在移动设备上响应的最佳方法是创建一个 16-9.gif 并将其设置为高度 100% 和宽度 100%，然后将此设置在容器中设置为相对。然后将视频元素设置为绝对位置，左 0，右 0，上 0，下 0，高度：100% 和宽度 100%。这将占据 gif 的整个高度，然后进行缩放。

    <div class="embed-responsive embed-responsive-16by9"> <-- set relative
      <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="embed-responsive-item"> <-- set absolute
        <source src="example.mp4" type="video/mp4"/>
      </video>
      <img src="this will be your gif of 16-9"/> <-- set height and width
    </div>

【讨论】：

感谢您的解决方案，我会尽快尝试