100vh Vimeo 播放器 iframe [英] 100vh Vimeo Player iframe

问题描述

我正在嵌入 Vimeo 视频并遇到了一些样式问题.这是我使用的播放器:https://developer.vimeo.com/player/sdk对于每个视口尺寸，播放器都应该完全填满屏幕，因此 min-width: 100vh 和 min-height: 100vw.

我设法使播放器适合宽度，使用

 ::v-deep iframe {最小宽度:100vw；最小高度:100vw；.玩家{宽度:100vw；高度:100vh；}}

然而，它忽略了最小高度.有没有人知道如何解决这个问题?

到目前为止，我的代码如下:

body {背景颜色:黄色；填充:0；边距:0；}.容器 {高度:100vh；宽度:100vw；显示:弹性；对齐项目:居中；对齐内容:居中；溢出:隐藏；}iframe {最小宽度:100vw；最小高度:100vw；}.玩家{宽度:100vw；高度:100vh；}

<iframe id="player1" src="https://player.vimeo.com/video/76979871" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

解决方案

如果视口较窄(即其纵横比小于视频的纵横比)，则要求视频占满视口的高度和使其太宽的位被裁剪.在这个片段中，假设在这种情况下视频应该水平居中.

相反，如果视口太宽，视频应占据视口的整个宽度，并应将其顶部和底部裁剪.

此代码段使用一个简单的容器来保存视频，以及内置的视频纵横比.应更改此纵横比以匹配要播放的任何视频(或用于在加载时找出视频内容的 Javascript 以及相应更改的 CSS 变量 --videoRatio).它根据设备和视频的相对纵横比计算所需的高度和宽度.

body {溢出:隐藏；}.容器 {--videoRatio: calc(16/9);/* 如果视频更改，请更改此内容 */背景颜色:黄色；填充:0；边距:0；宽度:100vw；高度:100vh；溢出:隐藏；位置:相对；}/* 首先假设视口足够宽，视频占据全宽，高度至少为 100vh */iframe {填充:0；边距:0；位置:相对；--w: 100vw;--h: calc(var(--w)/var(--videoRatio));高度:var(--h);宽度:var(--w);顶部:calc(50% - (var(--h)/2));左:0；宽度:var(--w);高度:var(--h);}/* 最大纵横比 */@media (max-aspect-ratio: 16/9) {/*视口对于完整视频来说太窄了*/iframe {--h: 100vh;--w: calc(var(--h) * var(--videoRatio));顶部:0；左: calc(50% - (var(--w)/2));}}

<div class="容器"><iframe id="player1" src="https://player.vimeo.com/video/76979871" frameborder="0"></iframe>

i am embedding a Vimeo video and ran into some issues styling the thing. This is the player I use: https://developer.vimeo.com/player/sdk The player should fill the screen entirely for every viewport-size, hence min-width: 100vh and min-height: 100vw.

I managed to make the player fit the width, using

  ::v-deep iframe {
    min-width: 100vw;
    min-height: 100vw;

    .player {
      width: 100vw;
      height: 100vh;
    }

  }

However, it ignores the min-height. Does anyone have an idea how to fix this?

Edit: The code I have so far is the following:

body {
background-color: yellow;
padding: 0;
margin: 0;
}
.container {
 height: 100vh;
 width: 100vw;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden; 
}
iframe {
  min-width: 100vw;
  min-height: 100vw;
}

.player {
 width: 100vw;
 height: 100vh;
}

<div class="h-screen flex items-center justify-center overflow-hidden">
   <iframe id="player1" src="https://player.vimeo.com/video/76979871" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>

解决方案

If the viewport is narrow (that is, its aspect ratio is less than the aspect ratio of the video) then it is required that the video take up the full height of the viewport and the bits that then make it too wide are cropped. In this snippet it is assumed that in this scenario the video should be centered horizontally.

Converseley, if the viewport is too wide, the video should take up the full width of the viewport and it should be cropped top and bottom.

This snippet uses a simple container to hold the video, and an inbuilt video aspect ratio. This aspect ratio should be changed to match whatever video is to be played (or Javascript used to find out what it is at load time and the CSS variable --videoRatio altered accordingly). It calculates the required height and width in terms of the relative aspect ratios of the device and the video.

body {
  overflow: hidden;
}
.container {
     --videoRatio: calc(16 / 9); /* CHANGE THIS IF THE VIDEO CHANGES */
    background-color: yellow;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    }
    /* to start with assume that the viewport is wide enough for the video taking up full width the height will be at least 100vh */
iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: 100vw;
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
}
    /* Maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {/*the viewport is too narrow for the full video */
  iframe {
    --h: 100vh;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2));
  }
}

<body>
    <div class="container">
       <iframe id="player1" src="https://player.vimeo.com/video/76979871" frameborder="0"></iframe>
    </div>
</body>

这篇关于100vh Vimeo 播放器 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！