响应YouTube视频没有特定的长宽比

发布于 2025-02-01 02:05:25 字数 432 浏览 0 评论 0 原文

我正在嵌入一些来自CMS并在YouTube上托管的视频在CMS中，唯一保存的部分是视频代码，

问题是每个视频都有

我尝试过的

<iframe width="100%" src="https://www.youtube.com/embed/MYViDoeCoDE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

不同纵横比，并且还搜索了基于CSS的代码，但是所有视频都需要在容器中指定方面 /评分

吗？ Vimeo可能会有可能吗？

原文

I'm embedding some video coming from a CMS and hosted on YouTube
In CMS the only saved part is video code

The issue is that every video has a different aspect ratio

I tried

<iframe width="100%" src="https://www.youtube.com/embed/MYViDoeCoDE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

And also search for a CSS based code but all of them require to specify aspect / ration in the container

Is it possible?
Would it be possible with Vimeo?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅此而已 2025-02-08 02:05:25

当CSS最终可以将媒体查询应用于HTML标签时，我们将能够在没有JavaScript的帮助下调整动态纵横比。直到那时，您需要为不同的AR提供规则集。

最常用的是长宽比是宽屏16：9。基本上，上传到YouTube或Vimeo等媒体流服务的任何数字视频文件都将自动将其转录为几个副本，这些副本具有不同的分辨率，这些分辨率在其平台上流式传输时将是最佳的。视频分辨率，纵横比，编解码器，文件类型等的细节并不像5到6年前那样关键。此前，我询问了您必须处理的特定AR，但是您是AFK（ a Way f rom k eyboard），所以我开始创建一个在Vimeo上托管的3个视频的CSS示例（由于某种原因，YouTube不再使用SO）。它们如下：

宽屏16：9（InterWebs中所有视频的90％）^✼
电视4：3（全世界所有视频的7％）^✼
超宽屏幕21：9（已知宇宙中所有视频的3％）

^{^{不相信我的统计数据是有偏见和不准确的世界各个角落都有最高质量的视频流的量表，}}

PR0N行业可能在当天的我们将使用一个容器＆lt; div＆gt; 带有 位置：相对和＆lt; iframe＆gt; 带有位置：绝对和一个怪异的 padding-bottom （或 -top -top < /code>）为56.25％，以填充高度，因此与宽度相匹配。现在有一些更清洁的方法可以使用 vw 或 vh 和 flex ：


    figure {
      //...
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }

    .wide {
      /* 16:9 */
      width: 96vw;
      height: 54vw;
    }

    .tv {
      /* 4:3 */
      width: 96vw;
      height: 72vw;
    }

    .ultra {
      /* 21:9 */
      width: 96vw;
      height: 41vw;
    }

    iframe {
      max-height: 99vh;
    }

position> position> sopeption s的组合巨大的56.25％填充按下＆lt; iframe＆gt; ，直到达到宽度和高度匹配16：9 ar。 flex 还伸展内容，并在 vw 或 vh 中设置宽度和高度，使其更容易调整与视频的大小相关视口。最后一个规则集的作用像夹具，以防高度的高度（例如4：3）的高度： 72VW（ .tv ）超过视口。这里有一些文章，其中包含与社交媒体和流媒体网站有关的信息，以及有关AR和响应式设计的主题。

*,

*::before,

*::after {

  box-sizing: border-box;

}
html {

  font: 500 2ch/1.2 "Segoe UI"

}
html,

body {

  width: 100%;

  height: 100%;

  padding: 0;

  margin: 0;

}
body {

  display: flex;

  flex-flow: column nowrap;

}
figure {

  width: 100%;

  height: 100%;

  /* Not needed if <div> used */

  margin: 10px 0 0;

  display: flex;

  flex-flow: column nowrap;

  justify-content: center;

  align-items: center;

}

/*

When CSS can finally apply media queries to HTML tags we will be able to adapt dynamic aspect ratios without the help of JavaScript. Till then you'll need to provide rulesets for different ARs.

The most commonly used is aspect ratio is widescreen 16:9. Basically any digital video file uploaded to a media streaming service like Youtube or Vimeo will be automatically transcoded into several copies with varying resolutions that will be optimal when streaming from their platform. The minutiae of video resolution, aspect ratio, codecs, file types etc are not as critical as they were 5 to 6 years ago. Earlier, I asked you about specific ARs you have to deal with, but you were AFK (Away From the Keyboard), so I proceeded to create a CSS example of 3 videos hosted on Vimeo (for some reason Youtube does not work on SO anymore). They are as follows:

Widescreen 16:9 (90% of all videos in the interwebs)^✼
TV 4:3 (7% of all videos in the entire world)^✼
Ultra-Widescreen 21:9 (3% of all videos in the known universe)^✼

^{^✼Don't believe my statistics they are biased and inaccurate because of the pr0n industry probably has a gazillion terabytes of video streaming at the highest quality to all corners of the world}

Back in the day we would use a container <div> with position: relative and an <iframe> with position: absolute and a weird padding-bottom (or -top) of 56.25% to fill the height so it matches the width, ratio wise. Now there's some cleaner ways to reach optimal AR using either vw or vh and flex:


    figure {
      //...
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }

    .wide {
      /* 16:9 */
      width: 96vw;
      height: 54vw;
    }

    .tv {
      /* 4:3 */
      width: 96vw;
      height: 72vw;
    }

    .ultra {
      /* 21:9 */
      width: 96vw;
      height: 41vw;
    }

    iframe {
      max-height: 99vh;
    }

The combination of positions and the huge 56.25% padding pushed the <iframe> until it reached both width and height matching a 16:9 AR. flex also stretches content as well and setting width and height in vw or vh makes it easier to adjust the size of the video in relation to the viewport. The last ruleset acts like a clamp just in case the height of tall ratios such as 4:3 with height: 72vw (.tv) exceeds the viewport. Here are some articles that have information pertaining to social media and streaming sites as well as topics concerning AR and responsive design.

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font: 500 2ch/1.2 "Segoe UI"
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-flow: column nowrap;
}

figure {
  width: 100%;
  height: 100%;
  /* Not needed if <div> used */
  margin: 10px 0 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
/* ???? Alternate dimensions using vh */
.wide {
  /* 16:9 */
  width: 96vw; /* 176vh; ???? */ 
  height: 54vw;/* 99vh;  ???? */
}

.tv {
  /* 4:3 */
  width: 96vw; /* 173.25vh; ???? */
  height: 72vw;/* 99vh;     ???? */
}

.ultra {
  /* 21:9 */
  width: 96vw; /* 142.25vh; ???? */
  height: 41vw;/* 99vh;     ???? */
}

iframe {
  max-height: 99vh;
}

figcaption {
  width: 96vw;
  font-weight: 700;
  text-align: center;
  color: rgb(0, 173, 239);
  background: rgba(30, 30, 30, 0.9);
}

<figure>
  <iframe src="https://player.vimeo.com/video/710964142?h=ba257277c8" class='wide' frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  <figcaption>16:9 Widescreen</figcaption>
</figure>

<figure>
  <iframe src="https://player.vimeo.com/video/713828667?h=bcaec218f2" class="tv" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
  <figcaption>4:3 TV</figcaption>
</figure>

<figure>
  <iframe src="https://player.vimeo.com/video/225678399?h=c79a9be5c7" class='ultra' frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  <figcaption>21:9 Ultra-Widescreen</figcaption>
</figure>

回复收藏 0 原文

~没有更多了~