0

我正在将视频（来自 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>
4

2 回答 2

0

响应式设计是根据设备的高度和宽度改变对象。@media screen 用于 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>
于 2021-08-01T12:47:27.083 回答
0

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

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

这不是一个准确的整合。屏幕尺寸各不相同。如何选择断点？

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

这两种内联样式!important都被认为是非常糟糕的做法，但有时您需要后者来覆盖前者。
MDN 网络文档 | 特异性

.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

代码设计是移动优先的。有关使用媒体查询的更多信息。

于 2021-08-01T12:29:52.127 回答