Html 如何使用新的 YouTube iframe 样式代码嵌入高质量视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5001299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed high quality video with new YouTube iframe style code
提问by geoffs3310
I am using youtubes new iframe code to embed video but the videos seem to be lower quality than if I watch them on youtube. Is there a way to embed the high quality video?
我正在使用 youtube 的新 iframe 代码嵌入视频，但视频质量似乎低于我在 youtube 上观看时的质量。有没有办法嵌入高质量的视频？
My code at the moment is
我目前的代码是
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY" frameborder="0" allowfullscreen></iframe>
采纳答案by geoffs3310
Oh I've found it now you have to put ?vq=hd720on the end of the url like so:
哦，我发现现在你必须?vq=hd720像这样放在url 的末尾：
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY?vq=hd720" frameborder="0" allowfullscreen></iframe>
回答by Jason Renaud
&vq=hd720 or &vq=hd1080 did the trick where all else failed
&vq=hd720 或 &vq=hd1080 在所有其他方法都失败的情况下成功了
回答by filtermusic
The following code did the trick for me:
以下代码对我有用：
<iframe width="241" height="136" src="https://www.youtube.com/embed/NMG0CMkuUnA?version=3&vq=hd720" frameborder="0" allowfullscreen></iframe>
回答by Tyson Phalp
Also, it seems that YouTube now automatically serves up the quality that it thinks is optimized for the size of the embed, for iframe and AS3, regardless of whether or not the HD parameter is set.
此外，YouTube 现在似乎会自动提供它认为针对嵌入大小、iframe 和 AS3 优化的质量，无论是否设置了 HD 参数。
See this post, and thisfor more information.
UPDATE: See Jason Renaud's answerfor a good method that allows explicitly forcing the quality type. I tried it with an HTML5-embedded player, and it worked as expected.
更新：请参阅Jason Renaud 的答案，了解一种允许明确强制质量类型的好方法。我用嵌入 HTML5 的播放器尝试了它，它按预期工作。
回答by Ravat Parmar
Try this for specific quality of video..
试试这个以获得特定质量的视频..
144p : &vq=tiny
144p : &vq=微小
240p : &vq=small
240p : &vq=小
360p : &vq=medium
360p : &vq=中等
480p : &vq=large
480p：&vq=大
720p : &vq=hd720
720p：&vq=hd720
example :
例子 ：
<iframe width="320" height="350" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1&vq=tiny" frameborder="0"
allowfullscreen></iframe>
回答by systemaddict
It seems that the answer changes with time.To look at the meta of what is going on, it seems that there are two generalities to the desired effect.
答案似乎随着时间而改变。看看正在发生的事情的元数据，似乎对预期的效果有两个普遍性。
1) You can try and 'hack'the iframe code itself.
1) 您可以尝试“破解”iframe 代码本身。
2) You can try and create a container to trick the iframe into thinking it should display HD.
2）您可以尝试创建一个容器来诱使 iframe 认为它应该显示高清。
Let's do both.
让我们两者都做。
[ SPECIFIC IFRAME CODE]You can possibly edit the typical embed youtubeiframe link using current standards. I would recommend using a base size that would demand that size anyways and proceeding with step two to resize it.
[特定 IFRAME 代码]您可以使用当前标准编辑典型的嵌入 youtubeiframe 链接。我建议使用无论如何都需要该尺寸的基本尺寸，然后继续执行第二步来调整它的大小。
Look up a current listing such as the one on h3xedto see the way youtube calls the files when embedded.
查找当前列表，例如h3xed上的列表，以查看嵌入时 youtube 调用文件的方式。
Of note, I didn't find the following code anywhere, I discovered it. I need to call videos that are 720. I was looking for the answer to this question and when viewing the file I noted that it said 720p60 as the actual youtube setting. So I altered what seems to have worked before and sure enough...
值得注意的是，我在任何地方都没有找到以下代码，我发现了它。我需要调用 720 的视频。我一直在寻找这个问题的答案，在查看文件时，我注意到它说 720p60 作为实际的 youtube 设置。所以我改变了之前似乎有效的东西，果然......
<div class="responsive-container" >
<iframe width="780" height="480"
src="https://www.youtube.com/embed/DFzUdTUaAr4?rel=0&vq=hd720p60" frameborder="0" allowfullscreen></iframe>
</div>
worked. Note that essentially I added ?rel=0&vq=hd720p60And made the iframe size large enough to demand hd.
工作。请注意，基本上我添加了?rel=0&vq=hd720p60并使 iframe 大小足够大以要求高清。
[ CREATING A CONTAINER ]This works because you are asking youtube for a higher quality video and then going behind it's back and resizing it to fit the space you desire. Although you directly ask how to embed, I'm assuming you're asking to embed whenever and wherever you want - not being restricted to giant videos on page for high quality files.
[ 创建容器 ]这是有效的，因为您要求 youtube 提供更高质量的视频，然后将其返回并调整其大小以适应您想要的空间。尽管您直接询问如何嵌入，但我假设您要求随时随地嵌入 - 不限于页面上的大型视频以获得高质量文件。
A simple responsive container works well since iframes are made to be controlled through CSS. Using code similar to that found on thenewcode's Force-Embedded-Youtube-Videos-To-Play-In-HD articlewe create a code that restricts the aspect ratio to a limited size.
一个简单的响应式容器效果很好，因为 iframe 是通过 CSS 控制的。使用类似于在 newcode 的Force-Embedded-Youtube-Videos-To-Play-In-HD 文章中找到的代码，我们创建了一个将纵横比限制为有限大小的代码。
.responsive-container {
position: relative;
padding-bottom: 53.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container,
.responsive-container iframe {
max-width: 1280px;
max-height: 720px;
}
.responsive-container iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
*Of note: 'Legacy' code of &fmt=35, &fmt=22, or &fmt=37works at this point for video links. The youtube video opens up at this specific quality.
*注意：&fmt=35, &fmt=22, or &fmt=37此时视频链接的“旧版”工作代码。youtube 视频以这种特定质量打开。
Also note that you also have to notice a difference in tdl between youtube videos and embedded videos. They are (from my experience) not cross compatible. * (youtube.com/embeded... VS youtu.be/...)
另请注意，您还必须注意 youtube 视频和嵌入视频之间的 tdl 差异。它们（根据我的经验）不交叉兼容。* (youtube.com/embeded... VS youtu.be/...)
