使用正确的宽高比嵌入Youtube/Vimeo视频

Question

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

动态视频ID如下:

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

所以,我的问题是,有没有办法可以检测出视频的宽高比应该是多少？

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

并且您可以使用css-tricks中描述的javascript实现它: - http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

- 但这些仅在您使用width和height属性开始设置正确的宽高比时才有效.

大多数新的vimeo视频似乎是width ="400"height ="225",但我的网站处理的是一些不共享此比率的旧视频,因此您可以在视频的顶部和底部获得黑色管道或向下双方.

我试图在每个视频中删除这些黑色管道.

感谢任何建议,

Alsweet

Answer 1

获得尺寸

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

请求示例

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

并且您收到了视频维度的JSON响应(以及其他有用信息).

响应示例:

{
    "title": "Learning from StackOverflow.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的
• 葫芦
• deviantART的
• WordPress的
• MixCloud
• 的SoundCloud

正确显示视频

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

如果您的网站有响应,那么有些插件可以帮助您在按照建议调整大小时保持宽高比.

但是,我更喜欢纯CSS方法.您可以使用oEmbed的宽度和高度来执行以下操作:

你可以用嵌入代码中含有div,使iframe或object100%的宽度和高度,以及使用其他div的容器内给容器高度.内部div将有padding-top60%的强度,迫使主容器的高度为其宽度的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/调整窗口大小以查看高度如何自动调整为宽度的百分比.