嵌入具有正确纵横比的 Youtube/Vimeo 视频

Posted 2023-02-24

【中文标题】嵌入具有正确纵横比的 Youtube/Vimeo 视频

【英文标题】：Embedding a Youtube/Vimeo video with the correct aspect ratio

【发布时间】：2013-12-23 07:46:44

【问题描述】：

所以我有一个视频页面，我在其中嵌入了 vimeo 视频。麻烦的是，宽高比经常是错误的，因为我没有设置宽度和高度。让我在视频上留下黑条。我只动态传递 vimeo ID，所以我没有为每个视频设置宽度和高度。

像这样的动态视频 ID：

<iframe src="http://player.vimeo.com/video/<?php echo $videoID; ?>?title=0&amp;byline=0&amp;portrait=0"   frameborder="0"></iframe>

那么，我的问题是，有没有一种方法可以检测视频的宽高比应该是多少？

我知道有很多插件可以帮助您保持流体宽度的纵横比，例如； -http://fitvidsjs.com/

您可以使用 javascript 实现它，如 css-tricks 中所述： -http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

-- 但这些只有在您设置正确的纵横比以使用宽度和高度属性开始时才有效。

大多数新的 vimeo 视频似乎是 ，但我的网站处理一些不共享此比例的旧视频，因此您会在顶部和底部看到黑色管道视频或两侧。

我试图在每个视频上移除这些黑色管道。

感谢任何建议，

真棒

【问题讨论】：

我知道这已经过时了，这个问题有什么进展吗？

不幸的是，我无法找到可靠的解决方案。我唯一的选择是选择最常用的比率并顺其自然。大多数新的 YouTube 和 Vimeo 视频至少具有一致的纵横比。我遇到的问题是我也有很多旧的方形 vimeo 视频。

抱歉，忘记了这个话题。我一直在使用oembed.com 为 Vimeo 和 YouTube 获取适当尺寸的嵌入代码。然后您可以将其放入 FitVids 包装器中。

有一种纯 CSS 方法，不需要 JS 库来让视频保持其纵横比。在下面回答。

【参考方案1】：

获取尺寸

您可以使用oEmbed。 oEmbed 是一个用于显示嵌入内容的 API。您向服务端点发出 HTTP 请求，例如：

请求示例

http://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=NWHfY_lvKIQ

您会收到包含视频尺寸（以及其他有用信息）的 JSON 响应。

响应示例：

    "title": "Learning from ***.com", 
    "height": 270,
    "author_url": "http:\/\/www.youtube.com\/user\/GoogleTechTalks",
    "author_name": "GoogleTechTalks",
    "provider_name": "YouTube",
    "thumbnail_url": "http:\/\/i.ytimg.com\/vi\/NWHfY_lvKIQ\/hqdefault.jpg",
    "html": "\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/NWHfY_lvKIQ?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
    "provider_url": "http:\/\/www.youtube.com\/",
    "thumbnail_width": 480,
    "width": 480,
    "thumbnail_height": 360,
    "version": "1.0",
    "type": "video"

您可以在 oEmbed 网站上阅读完整的文档。该 API 提供了一种访问嵌入式内容的标准方式，并且得到了许多流行服务的支持，这里只是其中的几个：

YouTube Vimeo Flickr 葫芦 离经叛道 WordPress 混合云 SoundCloud

正确显示视频

oEmbed 为您提供宽度和高度，因此您可以根据需要简单地设置宽度和高度。

如果您的网站是响应式的，那么有一些插件可以帮助您在按照您的建议调整大小时保持纵横比。

不过，我更喜欢纯 CSS 方法。您可以使用 oEmbed 的宽度和高度来执行以下操作：

您可以将嵌入代码包装在包含 div 的内容中，使 iframe 或 object 宽度和高度为 100%，并在容器内使用另一个 div 来指定容器高度。内部div 将有一个padding-top，比如60%，迫使主容器的高度为其宽度的60%。您只需使用来自 oEmbed 的信息计算高度占宽度的百分比，即可计算出要使用多少填充。

示例 HTML

<div class="video">
    <span class="video-height"></span>
    <iframe src="https://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0">   </iframe>
</div>

示例 CSS

.video 
    width: 50%;
    position: relative;


.video > .video-height 
    padding-top: 60%;
    display: block;


iframe 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

您可以在此处查看一个工作示例：https://jsfiddle.net/k2eyty4f/3/ 调整窗口大小以查看高度如何自动调整为宽度的百分比。

【讨论】：

这太好了，我一直在寻找一种简单的方法来查找 YouTube 视频的原始上传尺寸。其中一些是奇怪的纵横比。