响应式视频大小 (Vimeo)答案

【问题标题】：Responsive video size (Vimeo)响应式视频大小 (Vimeo)
【发布时间】：2021-10-07 03:16:16
【问题描述】：

我正在将视频（来自 Vimeo）嵌入到我的调查中。我正在使用来自 Vimeo 的响应式嵌入代码。在我的手机上观看时看起来很棒，但是在我的笔记本电脑上观看时会占据整个屏幕。

有没有办法让它保持响应，以便在移动设备上查看时保持相同大小，但在笔记本电脑上查看时只有一半大小？

这是我正在使用的来自 Vimeo 的响应式嵌入代码：

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Neck Flexion Test"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

固定嵌入代码：

<iframe src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Neck Flexion Test"></iframe>

【问题讨论】：

标签： html vimeo embedded-video

【解决方案1】：

响应式设计是根据设备的高度和宽度改变对象。 @media 屏幕用于 HTML 文本标记语言的响应式设计。此代码采用 2 个参数作为最大高度和最大宽度。如果高度和宽度达到指定的限制，您编写的代码块将起作用，您的网页将切换到新设计。

如果您给 iframe 标签一个 id 并使用它，您可以为其他 iframe 对象赋予不同的属性，而不是在样式块中使用 iframe 标签。

<style>
    #vimeo {
        width: 100%;
    }
    
    @media screen and (min-width: 1000px) {
        #vimeo {
            width: 50%;
        }
    }
    
    @media screen and (min-width: 400px) {
        #vimeo {
            width: 25%;
        }
    }
</style>

    <body>
    <div style="padding:56.25% 0 0 0;position:relative;"><iframe id="vimeo" src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
            title="Neck Flexion Test"></iframe></div>
    <script src="https://player.vimeo.com/api/player.js"></script>

</body>

【讨论】：

感谢 Lawis，这是有道理的。您是否有机会帮助我专门更改我当前的嵌入代码（粘贴在初始问题中），以便我可以将您的修改粘贴到我的调查中以查看它是否有效？我想将所有笔记本电脑屏幕上的视频宽度尺寸减小约 50%（因为它目前占用了整个屏幕宽度），但在移动平台上保持尺寸正常/响应式（100% 宽度）？如果有帮助（50% 宽度），我可以为笔记本电脑的尺寸提供精确的分辨率参数。如果这有帮助，我还将 Vimeo 中的固定嵌入代码添加到我的初始问题中

【解决方案2】：

任何时候需要针对特定类型的设备，@media queries 都会这样做。笔记本设备的样式可以应用

@media screen and (min-width: 992px)

^{这不是一个准确的整合。屏幕尺寸各不相同。 How to choose breakpoints?}

我强烈建议从 style 属性中删除属性。

内联样式和!important 都被认为是非常不好的做法，但有时您需要后者来覆盖前者。
_{MDN 网络文档 | Specifity}

.video
{
  position: relative;
  padding: 56.25% 0 0 0;
}
.video iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 992px)
{
  .video iframe
  {
    width: 50%;
  }
}

<div class="video">
  <iframe src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Neck Flexion Test">
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

Interactive Code

^{代码设计为Mobile-first。更多关于Using media queries的信息。}

【讨论】：

感谢 Luko。您是否有机会帮助我专门更改我当前的嵌入代码（粘贴在初始问题中），以便我可以将您的修改粘贴到我的调查中以查看它是否有效？我想将所有笔记本电脑屏幕上的视频宽度尺寸减小约 50%（因为它目前占用了整个屏幕宽度），但在移动平台上保持尺寸正常/响应式（100% 宽度）？如果有帮助，我可以提供精确的分辨率参数来确定笔记本电脑的尺寸（50% 宽度）。
代码代表确切的解决方案。如果您希望在 iframe 上具有固定比率 (1920x1080)，请使用 aspect-ratio: 16/9 并删除 width 和 height 属性。
谢谢卢克。当我将您建议的脚本复制到我的调查中的源选项中时，单击确认时会忽略其中的一部分。请参阅下面的两张图片来说明这一点（ibb.co/RB6kPgj ibb.co/Wz8L6C5
我不知道这个调查是什么，结果与代码不符。我可以为您提供correct result。稍微调整大小后，它将应用笔记本电脑样式。