jQuery 在没有 iframe 的情况下嵌入 HTML5 YouTube 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18726480/
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
Embed HTML5 YouTube video without iframe?
提问by user2217162
Is it possible to embed an html5 version of a youtube video without using an iframe?
是否可以在不使用 iframe 的情况下嵌入 html5 版本的 youtube 视频？
回答by anapsix
Here is a example of embedding without an iFrame:
下面是一个没有 iFrame 的嵌入示例：
<div style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;">
<embed src="http://www.youtube.com/v/GlIzuTQGgzs?version=3&hl=en_US&rel=0&autohide=1&autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>compare to regular iframe "embed" code from YouTube:
与来自 YouTube 的常规 iframe“嵌入”代码相比：
<iframe width="854" height="510" src="//www.youtube.com/embed/GlIzuTQGgzs" frameborder="0" allowfullscreen></iframe>and as far as HTML5 goes, use <object>tag like so (corrected):
就 HTML5 而言，使用这样的<object>标签（更正）：
<object style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;" data="http://www.youtube.com/embed/GlIzuTQGgzs">
</object>回答by Ionic? Biz?u
Yes. Youtube APIis the best resource for this.
是的。Youtube API是最好的资源。
There are 3 way to embed a video:
有 3 种方法可以嵌入视频：
- IFrame embeds using
<iframe>tags - IFrame embeds using the IFrame Player API
- AS3 (and AS2*) object embeds
DEPRECATED
- 使用
<iframe>标签嵌入 IFrame - 使用 IFrame Player API 嵌入 IFrame
- AS3（和 AS2*）对象嵌入
DEPRECATED
I think you are looking for the second one of them:
我认为您正在寻找其中的第二个：
IFrame embeds using the IFrame Player API
使用 IFrame Player API 嵌入 IFrame
The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.
下面的 HTML 和 JavaScript 代码显示了一个简单的示例，该示例将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。此处指定的 onYouTubePlayerAPIReady() 函数会在 IFrame Player API 代码加载后自动调用。此代码未定义任何播放器参数，也未定义其他事件处理程序。
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
</script>
Here are some instructionswhere you may take a look when starting using the API.
An embed example without using iframeis to use <object>tag:
一个不使用的嵌入示例iframe是使用<object>标签：
<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3"/
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
(replace yt-video-idwith your video id)
（替换yt-video-id为您的视频 ID）
回答by markthethomas
Yes, but it depends on what you mean by 'embed'; as far as I can tell after reading through the docs, it seems like you have a couple of options if you want to get around using the iframe API. You can use the javascript and flash API's (https://developers.google.com/youtube/player_parameters) to embed a player, but that involves creating Flash objects in your code (something I personally avoid, but not necessarily something that you have to). Below are some helpful sections from the dev docs for the Youtube API.
是的，但这取决于您所说的“嵌入”是什么意思；据我阅读文档后所知，如果您想使用 iframe API，您似乎有几个选择。您可以使用 javascript 和 flash API ( https://developers.google.com/youtube/player_parameters) 来嵌入播放器，但这涉及在您的代码中创建 Flash 对象（我个人避免这样做，但不一定是您拥有的）到）。以下是 Youtube API 开发文档中的一些有用部分。
If you really want to get around all these methods and include video without any sort of iframe, then your best bet might be creating an HTML5 video player/app that can connect to the Youtube Data API (https://developers.google.com/youtube/v3/). I'm not sure what the extent of your needs are, but this would be the way to go if you reallywant to get around using any iframes or flash objects.
如果你真的想绕过所有这些方法并在没有任何 iframe 的情况下包含视频，那么你最好的选择可能是创建一个 HTML5 视频播放器/应用程序，它可以连接到 Youtube Data API ( https://developers.google.com /youtube/v3/）。我不确定您的需求有多大，但如果您真的想绕过使用任何 iframe 或 Flash 对象，这将是一种可行的方法。
Hope this helps!
希望这可以帮助！
Useful:
有用：
(https://developers.google.com/youtube/player_parameters)
（https://developers.google.com/youtube/player_parameters）
IFrame embeds using the IFrame Player API
Follow the IFrame Player API instructions to insert a video player in your web page or application after the Player API's JavaScript code has loaded. The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.
The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.
使用 IFrame Player API 嵌入 IFrame
在播放器 API 的 JavaScript 代码加载后，按照 IFrame 播放器 API 说明在您的网页或应用程序中插入视频播放器。视频播放器构造函数中的第二个参数是一个指定播放器选项的对象。在该对象中， playerVars 属性标识玩家参数。
下面的 HTML 和 JavaScript 代码显示了一个简单的示例，该示例将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。此处指定的 onYouTubePlayerAPIReady() 函数会在 IFrame Player API 代码加载后自动调用。此代码未定义任何播放器参数，也未定义其他事件处理程序。
...
...
IFrame embeds using tags
Define an tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The tag's height and width parameters specify the dimensions of the player.
If you are creating the element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:
使用标签嵌入 IFrame
在您的应用程序中定义一个标签，其中 src URL 指定播放器将加载的内容以及您要设置的任何其他播放器参数。标签的高度和宽度参数指定播放器的尺寸。
如果您自己创建元素（而不是使用 IFrame Player API 来创建它），您可以将播放器参数直接附加到 URL 的末尾。URL 具有以下格式：
...
...
AS3 object embeds
Object embeds use an tag to specify the player's dimensions and parameters. The sample code below demonstrates how to use an object embed to load an AS3 player that automatically plays the same video as the previous two examples.
AS3 对象嵌入
对象嵌入使用标签来指定播放器的尺寸和参数。下面的示例代码演示了如何使用嵌入对象加载 AS3 播放器，该播放器自动播放与前两个示例相同的视频。
回答by jamaco
Use the object tag:
使用对象标签：
<object data="http://iamawesome.com" type="text/html" width="200" height="200">
<a href="http://iamawesome.com">access the page directly</a>
</object>
Ref: http://debug.ga/embedding-external-pages-without-iframes/
参考：http: //debug.ga/embedding-external-pages-without-iframes/
回答by prod3v3loper
Because of the GDPR it makes no sense to use the iframe, you should rather use the object tag with the embed tag and also use the embed link.
由于 GDPR，使用 iframe 毫无意义，您应该使用带有 embed 标签的 object 标签，并使用 embed 链接。
<object width="100%" height="333">
<param name="movie" value="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw">
<embed src="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw" type="application/x-shockwave-flash" width="100%" height="333">
</object>You should also activate the extended data protection mode function to receive the no cookie url
您还应该激活扩展数据保护模式功能以接收无cookie url
