嵌入具有正确宽高比的Youtube / Vimeo视频 [英] Embedding a Youtube/Vimeo video with the correct aspect ratio
问题描述
所以我有一个视频页面，我嵌入一个vimeo视频。麻烦的是，宽高比通常是错误的，因为我不设置宽度和高度。把视频上的黑条留给我。我只动态传递vimeo ID，所以我不设置每个视频的宽度和高度。
So I have a video page where I embed a vimeo video. The trouble is, the aspect ratio is often wrong because I don't set the width and height. Leaving me with black bars on the video. I only pass in the vimeo ID dynamically, so I don't set a width and height per video.
动态视频ID如下：
<iframe src="http://player.vimeo.com/video/<?php echo $videoID; ?>?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
因此，我的问题是，是否有一种方法可以检测视频的宽高比是吗？
So, my question is, is there a way I can detect what the aspect ratio of the video should be?
我知道有很多插件可以帮助您保持流体宽度的宽高比，例如：
- http://fitvidsjs.com/
I know there are lots of plugins that can help you maintain an aspect ratio for fluid widths, such as; -http://fitvidsjs.com/
，您可以使用javascript实现它，如css-tricks中所述：
- http：// css-tricks。 com / NetMag / FluidWidthVideo / Article-FluidWidthVideo.php
and you can achieve it with javascript as described on css-tricks: -http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
- 但这些仅适用于您设置正确的宽高比以开始使用宽度和高度属性。
-- but these only work if you set the correct aspect ratio to begin with using the width and height attributes.
大多数新vimeo视频似乎是width =400height =225，但我的网站处理一些不共享这个比率的老视频，你会得到黑色管道沿着视频的顶部和底部或两侧。
Most new vimeo videos seem to be width="400" height="225", but my website deals with some older videos that don't share this ratio, so you get black pipes either along the top and bottom of the video or down the sides.
这是我试图在每个视频中删除的黑色管道。
It is these black pipes that I'm trying to remove on every video.
欣赏任何建议，
Alsweet
推荐答案
获取尺寸
您可以使用 oEmbed 。 oEmbed是用于显示嵌入内容的API。您向服务端点发出HTTP请求，例如：
Getting the dimensions
You can use oEmbed. oEmbed is an API for displaying embedded content. You make a HTTP request to the service endpoint, for example:
请求示例
http://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=NWHfY_lvKIQ
您会收到一个带有视频尺寸（以及其他有用信息）的JSON响应。
And you recieve a JSON response with the video dimensions (among other useful information).
回应范例：
{
"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提供了一种访问嵌入内容的标准方式，并且受到众多热门服务的支持，这里仅提供几种服务：
You can read the full documentation at the oEmbed website. This API provides a standard way of accessing embedded content and it's supported by lots of popular services, here are just a few:
- li>
- Vimeo
- Flickr
- Hulu
- Deviantart
- WordPress
- MixCloud
- SoundCloud
- YouTube
- Vimeo
- Flickr
- Hulu
- Deviantart
- WordPress
- MixCloud
- SoundCloud
oEmbed提供了宽度和高度，因此您可以根据需要轻松设置宽度和高度。
oEmbed provides you with the width and height so you can simply set your width and height as required.
如果你的网站是响应式的，那么有插件，以帮助维持纵横比，当调整大小时，你建议。
If your website is responsive then there are plugins to help maintain the aspect ratio when resizing as you suggested.
但是，我更喜欢纯CSS方法。您可以使用oEmbed的宽度和高度执行以下操作：
However, I prefer a pure CSS approach. You can use the width and height from oEmbed to do the following:
您可以将嵌入代码封装在包含 div ，使 iframe 或对象 100％的宽度和高度，并使用另一个 div 在容器中给出容器高度。内部 div 将有一个 padding-top 例如60％，强制主容器的高度为60％的宽度。
You can wrap the embed code in a containing div, make the iframe or object 100% width and height, and use another div inside your container to give the container height. The inner div will have a padding-top of say 60%, forcing the main container to have a height 60% of its width. You simply work out how much padding to use by calculating the height as a percentage of the width using the information from oEmbed.
示例HTML / p>
Example 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/ 调整窗口大小以查看高度如何自动调整为宽度的百分比。
You can see a working example here: https://jsfiddle.net/k2eyty4f/3/ Resize the window to see how the height automatically adjusts as a percentage of the width.
这篇关于嵌入具有正确宽高比的Youtube / Vimeo视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
