- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
所以我有一个视频页面,我在其中嵌入了一个 vimeo 视频。麻烦的是,纵横比经常是错误的,因为我没有设置宽度和高度。给我留下视频上的黑条。我只动态传递 vimeo ID,所以我没有为每个视频设置宽度和高度。
像这样的动态视频 ID:
<iframe src="http://player.vimeo.com/video/<?php echo $videoID; ?>?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
那么,我的问题是,有没有一种方法可以检测视频的纵横比应该是多少?
我知道有很多插件可以帮助您保持流体宽度的纵横比,例如;- http://fitvidsjs.com/
并且您可以按照 css-tricks 中所述使用 javascript 实现它:- http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
-- 但这些仅在您设置正确的宽高比以使用宽度和高度属性开始时才有效。
大多数新的 vimeo 视频似乎是 width="400"height="225",但我的网站处理一些不共享此比例的旧视频,因此您会在顶部和底部看到黑色管道视频或侧面。
我试图在每个视频中删除这些黑色管道。
感谢任何建议,
爱甜
最佳答案
您可以使用 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 提供了一种访问嵌入式内容的标准方式,并且受到许多流行服务的支持,这里只是其中的一部分:
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/调整窗口大小以查看高度如何自动调整为宽度的百分比。
关于javascript - 以正确的纵横比嵌入 Youtube/Vimeo 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20415764/
我正在开发一个小型 Web 应用程序,其中有一个 object 元素(包含一个 embed),用于显示小型文档。 文档可以是 PDF 或纯文本文件 (.txt),我以 base64 字符串的形式从 W
我有一种小型语言,它基本上是 OCaml 的扩展(实际上它是 OCaml 子集的扩展,但这并不重要)。为了简化事情,我有一个“转义”表达式,可以将 OCaml 文字传输到我的语言中(因此您可以将任意
据我所知,我知道 embed tag用于嵌入来自 youtube 等网站的视频,object tag用于 Flash 视频和 video tags下HTML5 .但我很好奇这些标签的深入细节以及作为开
我假设您可以将 WebKit 嵌入到另一个桌面应用程序中并向其发送一个字符串,例如: Hello world! 它将显示在窗口内。 我的问题是,如果我将其压缩表示(JPEG 转储)加载到内存中,我该如
有没有一种可能的方式,我可以从youtube检索我的最新视频的列表(带有缩略图),使用cron作业将嵌入的代码存储在数据库中,这样我就可以在单独的页面上显示视频,而不是将用户引向youtube观看视频
最近我发现我的网站上嵌入的 YouTube 视频存在问题 - 全屏按钮不再起作用。确实有过一次。该按钮是可见的,但单击时没有任何反应。 我正在使用 Youtube Javascript API 将视频
在 Keras 内置函数中嵌入使用哪种算法?Word2vec?手套?其他? https://keras.io/layers/embeddings/ 最佳答案 简短的回答是都不是。本质上,GloVe 的
在 LSTM 上用于建模 IMDB 序列数据 ( https://github.com/fchollet/keras/blob/master/examples/imdb_lstm.py ) 的 ker
在机器学习中,通常用 one-hot-encoding 表示分类(特别是:名义)特征。 .我正在尝试学习如何使用 tensorflow 的嵌入层来表示分类问题中的分类特征。我有 tensorflow
我有一个使用 Storyboard的应用程序,我想在我的主视图中有一个 View ,并让它在场景中的不同 View 之间切换。 所以目前我有“容器对象”,我可以在其中嵌入另一个 viewControl
在我的项目中我遇到了这样的情况。 function fonsubmit() { alert('Out side PHP'); //Here the php code starts
我正在尝试添加一个JFileChooser,它选择父目录并允许用户输入文件名称。我知道 showSaveDialog 和 showOpenDialog 方法,但我不想创建新窗口。 这是我到目前为止所拥
我注意到我的网站创建了这样的链接:www.domain.com/post-name/embed/ 恐怕这可能会影响 SEO。是否可以禁用此功能? 最佳答案 显然这是默认的 WordPress 行为。此
我试图从 C 代码调用 python 函数,我遵循了 here 中的示例 我也有正确的包含文件目录、库目录和链接 python32.lib(我使用 python 32)但是错误是 python/C A
我正在使用基于云的 EDR 平台来监控客户端受损网络上发生的进程。我最近经常看到的是使用选项“-Embedding”调用的 msiexec.exe C:\Windows\System32\MsiExe
我有一个列表,其中包含数百万个需要嵌入的句子。我正在使用 Flair以此目的。这个问题似乎应该是并行的。但是,当我尝试优化时,我的性能要么没有提高,要么只是停滞不前。 我将我的句子定义为一个简单的字符
我想在我的应用程序中添加嵌入的 YouTube 视频:我该怎么做?我有这个 import 'package:youtube_player/youtube_player.dart'; import 'p
我有 json 看起来像: myjson = {"queries":{"F.SP": 27}} 所以与 queryResults = JObject.Parse(jsonString) 我可以 fir
我在 html 文档中嵌入 highcharts 饼图时遇到问题。具体来说,我无法在不更改图表大小的情况下调整图表容器的大小。有谁知道您是否可以在不缩小图表的情况下减少默认填充?或者,您可以在不增加容
我不太确定这在 MediaWiki 中是否可行。 我有几个类别,每个类别包含几页。如果您打开一个类别页面,您将看到该类别的内容,通常由以下三个部分组成: 用户定义的文本(可以使用编辑链接进行编辑)。
我是一名优秀的程序员,十分优秀!