标签: youtube-iframe-api

我想在 iframe youtube 360​​ 视频播放器上设置一个 javascript 侦听器，它可以捕获正在旋转的 360 全景图的平移/倾斜坐标。

有谁知道这是否可能或 youtube 360​​ 播放器的 api 的一些文档？我自己找不到任何东西。

似乎 Youtube iframe API 最近在他们的 iframe API 中引入了一个错误。

这是一个错误示例，直接从Youtube iframe 演示页面中提取：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://google-developers.appspot.com').
g.C @ www-widgetapi.js:116
g.G @ www-widgetapi.js:113
setInterval (async)
ab @ www-widgetapi.js:89
kb @ www-widgetapi.js:114
W @ www-widgetapi.js:98
Y @ www-widgetapi.js:118
createYTPlayer @ as3_demo_functions.js:385
onYouTubePlayerAPIReady @ as3_demo_functions.js:424
(anonymous) @ www-widgetapi.js:140
(anonymous) @ www-widgetapi.js:140
10:33:24.521 

知道如何解决这个问题吗？据说设置origin应该防止这种情况发生，但似乎他们没有origin在他们的 JS 中正确使用。

我已将此 iframe 代码附加到我的纯 html 页面。在这里，我想在页面加载时进行自动播放。我在 Firefox 中尝试过，它对我来说工作正常。当我加载 chrome 时，它​​没有自动播放。

我的代码是 <iframe width="420" height="345" src="https://www.youtube.com/embed/qsP3Y4hHyeM?autoplay=1"> </iframe>

它适用于 Firefox 浏览器。但是当我加载到 chrome 浏览器时它不起作用。

有人可以帮我吗？

我必须做额外的参数吗？

谢谢你。

我能够在我的 Angular 6 应用程序中使用 Youtube Iframe API（以某种方式）。但是，我想从我控制的列表中为它提供动态 videoIds。我的计划是监听来自播放器的事件，然后在播放完当前视频后加载另一个视频。但我似乎无法解决这个问题。我仍在学习 Typescript 和 Angular，我很好奇为什么我从 IFrame API 播放器中调用的任何函数调用的任何方法都会得到 Uncaught TypeError：

这是我的代码：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Video } from '../shared/model/video.model';
import { Subscription } from 'rxjs';
import { VideoPlayerService } from '../shared/services/video-player.service';

@Component({
  selector: 'ntv-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit, AfterViewInit {

  player;
  video: Video;
  videos: Video[];
  videoSubscription: Subscription;

  constructor(private videoService: VideoPlayerService) { }

  ngAfterViewInit() {
    const doc = (<any>window).document;
    const playerApiScript = doc.createElement('script'); …

HTML：

<div class="video">
  <iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS：

.video {
  width: 100%;
  height: 200px;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JSFIDDLE： http : //jsfiddle.net/pj2utq4v/

问题：如何强制 iframe 为父 div 宽度的 100%。由于父 div 的高度只有 200 像素，因此 iframe 视频将被裁剪，这对我来说也没有问题。

我正在使用这个Youtube Iframe Api。自定义播放率在网络上运行良好，而不是在移动浏览器上运行。

HTML：

<iframe id="ws-frame" width="640" height="360" src="https://www.youtube.com/embed/HREjplMivXE?enablejsapi=1&rel=0&webm=1"frameborder="0" allowfullscreen>

<select id="speed">
    <option>0.25</option>
    <option>0.5</option>
    <option selected="selected">1</option>
    <option>1.5</option>
    <option>2</option>
</select>

JavaScript：

$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

如何让它在移动浏览器中工作。

我正在为内容管理系统管理 UI 构建扩展。该扩展由 CMS 在沙盒 iframe 中托管。

扩展的目的是嵌入 YouTube 视频，以便用户能够看到其预览。所以它是沙盒 iframe 中的一个 iframe。

我遇到的问题是沙箱（父 iframe）没有allow-presentation允许，这导致在 YouTube 嵌入代码中触发以下异常：

DOMException: Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' 

视频工作正常，但未处理的错误正在生成不需要的调试断点，并向浏览器控制台发送垃圾邮件。

我试图用?fs=0参数禁用全屏模式，但仍然调用代码并且仍然抛出错误。

有没有办法使嵌入代码在没有启用允许呈现的 iframe 中工作而不会出错？

我正在使用 iframe API，我想在页面上嵌入一些视频，但我不想在用户暂停视频时显示相关视频。

我知道在 2018 年 9 月之后，Youtube 取消了在结尾或暂停视频时隐藏相关视频的可能性。

我知道参数 rel=0 现在显示来自视频上传者的同一帐户的相关视频。

我也知道这个问题已经被回答过很多次了，但我至少见过一个网站没有发生这种情况。示例：https : //earth.stanford.edu/

要生成 iframe，我使用以下代码：

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player1', {
        height: '360',
        width: '640',
        videoId: 'lPVBrRd9wCo',
        playerVars: {
            rel: '0',
            showinfo: '0',
            loop: '1',
            playlist: 'lPVBrRd9wCo',
            autoplay: '1',
            mute: '1',
            iv_load_policy: '3',
            'ytp-pause-overlay': '0'
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

https://codepen.io/romualdinho/pen/wZbxmj 中的完整代码

有没有其他方法可以在暂停时隐藏相关视频？斯坦福是如何做到的？我尝试了相同的方式，相同的参数等，但没有。他们甚至能够隐藏视频的标题。

是否有某种允许这样做的 Google 帐户？（高级、非营利、教育等）

谢谢！

我收到此错误： Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

我的页面按我希望的方式运行（我没有注意到任何不受欢迎的行为），但我从不喜欢忽略控制台中的错误，尤其是在我什至不了解根本原因的情况下。

我的问题不是重复的，因为我已经研究了所有这些问题，但没有一个答案有效：

• 无法在“DOMWindow”上执行“postMessage”：https://www.youtube.com !== http://localhost:9000
• 无法在“DOMWindow”上执行“postMessage”：提供的目标源与收件人窗口的源不匹配（“null”）
• Youtube API - 无法在“DOMWindow”上执行“postMessage”
• YouTube API 和跨源请求
• YouTube iFrame Player API 无法在 DOMWindow 上执行 postMessage
• 无法在“DOMWindow”上执行“postMessage”：目标/来源不匹配 http 与 https

我已经在用了https。

我已经尝试设置playerVars为{origin: window.location.origin}.

我已经尝试过设置host。

我已经尝试过更改 iframe 的可见性。

等等。

var playerVars = {origin: window.location.origin};///sf/answers/3536277321/
window.onYouTubeIframeAPIReady = function () {
    for (var i = 0; i < youtube.length; i++) …

请检查此视频。它来自我的视频频道https://www.youtube.com/watch?v=lgFXZP8K7Ew

我的问题是，当我将此视频嵌入我的网站时，它会向我显示此消息 ( https://ibb.co/r3mvsfH )。但是在视频 ( https://ibb.co/z6BzGVD )上选中了“允许嵌入” 。我在同一个邮件地址下有两个 YouTube 帐户，两个帐户的所有视频都显示“视频所有者已禁用在其他网站上播放”

仅供参考，这不是直播，只是我帐户中的普通视频剪辑。

什么都试过了，每次故障排除；相同的结果。

这是我试图放置的代码

<iframe width="560" height="315" src="https://www.youtube.com/embed/lgFXZP8K7Ew" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>