Question

是否可以在不使用iframe的情况下嵌入html5版本的YouTube视频？

Answer 1

以下是没有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&amp;hl=en_US&amp;rel=0&amp;autohide=1&amp;autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>

与来自YouTube的常规iframe“嵌入”代码进行比较：

<iframe width="854" height="510" src="//www.youtube.com/embed/GlIzuTQGgzs" frameborder="0" allowfullscreen></iframe>

就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>

Answer 2

是。 Youtube API是最好的资源。

嵌入视频的方法有三种：

IFrame嵌入使用<iframe>标记
使用IFrame播放器API嵌入IFrame
AS3（和AS2 *）对象嵌入 DEPRECATED

我认为你正在寻找其中的第二个：

IFrame embeds using the IFrame Player API

下面的HTML和JavaScript代码显示了一个简单的示例，它将YouTube播放器插入到id值为ytplayer的页面元素中。加载IFrame Player API代码时，将自动调用此处指定的onYouTubePlayerAPIReady（）函数。此代码不定义任何播放器参数，也不定义其他事件处理程序。

<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 instructions，您可以在开始使用API时查看。

不使用iframe的嵌入示例是使用<object>标记：

<object width="640" height="360">
    <param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;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&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

（将yt-video-id替换为您的视频ID）

JSFIDDLE

Answer 3

是的，但这取决于你的意思＆＃39;嵌入＆＃39 ;;通过阅读文档后我可以看出，如果您想使用iframe API，似乎有几个选项。您可以使用javascript和flash API（https://developers.google.com/youtube/player_parameters）来嵌入播放器，但这涉及在代码中创建Flash对象（我个人避免使用的内容，但不一定是您必须使用的内容）。以下是Youtube API的开发文档中的一些有用部分。

如果您真的想要绕过所有这些方法并包含没有任何iframe的视频，那么您最好的选择是创建一个可以连接到Youtube Data API的HTML5视频播放器/应用（https://developers.google.com/youtube/v3/）。我不确定您的需求范围是多少，但如果真的想要使用任何iframe或flash对象，那么这将是一种方法。

希望这有帮助！

<强>有用：

（https://developers.google.com/youtube/player_parameters）

使用IFrame播放器API嵌入IFrame

按照IFrame Player API说明，在加载Player API的JavaScript代码后，在您的网页或应用程序中插入视频播放器。视频播放器的构造函数中的第二个参数是指定播放器选项的对象。在该对象中，playerVars属性标识玩家参数。

下面的HTML和JavaScript代码显示了一个简单的示例，它将YouTube播放器插入到id值为ytplayer的页面元素中。加载IFrame Player API代码时，将自动调用此处指定的onYouTubePlayerAPIReady（）函数。此代码不定义任何播放器参数，也不定义其他事件处理程序。

...

IFrame使用代码嵌入

在应用程序中定义一个标记，其中src URL指定播放器将加载的内容以及您要设置的任何其他播放器参数。标签的高度和宽度参数指定了播放器的尺寸。

如果您自己创建元素（而不是使用IFrame Player API创建元素），则可以将播放器参数直接附加到URL的末尾。该URL具有以下格式：

...

AS3对象嵌入

对象嵌入使用标记来指定播放器的尺寸和参数。下面的示例代码演示了如何使用嵌入的对象来加载AS3播放器，该播放器会自动播放与前两个示例相同的视频。

Answer 4

使用object标签：

<object data="http://iamawesome.com" type="text/html" width="200" height="200">
  <a href="http://iamawesome.com">access the page directly</a>
</object>

参考：http://debug.ga/embedding-external-pages-without-iframes/

Answer 5

由于GDPR使得使用iframe毫无意义，因此您应该将object标签与embed标签一起使用，并同时使用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>

您还应该激活扩展数据保护模式功能以接收无cookie网址

在没有iframe的情况下嵌入HTML5 YouTube视频？

5 个答案:

IFrame embeds using the IFrame Player API