Javascript 以正确的纵横比嵌入Youtube/Vimeo视频
所以我有一个视频页面,在那里我嵌入了一个vimeo视频。问题是,纵横比经常是错误的,因为我没有设置宽度和高度。在视频中留下黑色的条子。我只动态传入vimeo ID,所以我没有设置每个视频的宽度和高度 动态视频ID如下所示:Javascript 以正确的纵横比嵌入Youtube/Vimeo视频,javascript,html,css,video,youtube,Javascript,Html,Css,Video,Youtube,所以我有一个视频页面,在那里我嵌入了一个vimeo视频。问题是,纵横比经常是错误的,因为我没有设置宽度和高度。在视频中留下黑色的条子。我只动态传入vimeo ID,所以我没有设置每个视频的宽度和高度 动态视频ID如下所示: <iframe src="http://player.vimeo.com/video/<?php echo $videoID; ?>?title=0&byline=0&portrait=0" width="400" heigh
<iframe src="http://player.vimeo.com/video/<?php echo $videoID; ?>?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
获取维度
你可以用。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
- 维梅奥
- Flickr
- 葫芦
- 德维安塔特
- WordPress
- 混合云
- 声云
正确显示视频
oEmbed为您提供了宽度和高度,所以您可以根据需要简单地设置宽度和高度
如果你的网站是有响应的,那么在按照你的建议调整大小时,有一些插件可以帮助保持纵横比
然而,我更喜欢纯CSS方法。可以使用“从oEmbed开始的宽度和高度”执行以下操作:
您可以将嵌入代码包装在包含div
的容器中,使iframe
或对象的宽度和高度为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>
您可以在这里看到一个工作示例:调整窗口大小,以查看高度如何自动调整为宽度的百分比 我知道这很古老,在这个问题上有什么进展吗?不幸的是,我没能找到一个可靠的解决方案。我唯一的选择是选择最常用的比率,并与它滚动。大多数新的YouTube和Vimeo视频至少具有一致的纵横比。我遇到的问题是,我也有很多老的square vimeo视频。对不起,忘了这个帖子。我一直在为Vimeo和YouTube获取合适尺寸的嵌入代码。然后你可以把它放入FitVids包装器中。有一种纯CSS方法,它不需要JS库就可以让视频保持其纵横比。回答如下。这太棒了,我一直在寻找一种简单的方法来找到YouTube视频的原始上传维度。其中一些是奇数纵横比。
.video {
width: 50%;
position: relative;
}
.video > .video-height {
padding-top: 60%;
display: block;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}