【问题标题】：How to write a plugin or userscript to pop out an embedded YouTube video to a new window?如何编写插件或用户脚本将嵌入的 YouTube 视频弹出到新窗口？
【发布时间】：2016-01-08 19:37:37
【问题描述】：

作者注

在受到cmets的启发后，我想我可以自己实现它。感谢您的光临。

原始问题

例如，我想在页面中弹出嵌入的 YouTube 视频

https://www.udacity.com/course/viewer#!/c-ud037/l-1649018590/m-1659588540

看起来像这样

youtube html5 播放器作为 iframe 嵌入

<iframe data-ng-controller="videoPlayer" class="ng-scope" frameborder="0" allowfullscreen="1" title="YouTube video player" width="930" height="523" src="https://www.youtube.com/embed/OATi2nCjEoE?autoplay=1&amp;color=red&amp;controls=1&amp;rel=0&amp;showinfo=0&amp;fs=1&amp;theme=light&amp;wmode=opaque&amp;html5=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.udacity.com" id="widget2"></iframe>

我希望播放器可以在带有 URL 的新窗口中弹出：

https://www.youtube.com/embed/OATi2nCjEoE?autoplay=1&color=red&controls=1&rel=0&showinfo=0&fs=1&theme=light&wmode=opaque&html5=1&enablejsapi=1&origin=https%3A%2F%2Fwww.udacity.com

感谢 JaromandaX，我的临时脚本如下：

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @include        https://www.udacity.com/course/viewer*
// @grant        none
// ==/UserScript==


$(document).ready(function()
                  {
                      setTimeout(function(){

                          var button = document.createElement('button');
                          button.type = 'button';
                          button.appendChild(document.createTextNode('Pop Youtube'));
                          button.setAttribute("onclick", "window.open(document.getElementById('widget2').src, 'my video');")
                          document.querySelectorAll("[class=row-gap-small]")[0].appendChild(button)
                      }, 2000);
                  });

我的问题是，如图所示通过按钮切换 youtube 播放器的内容后，iframe src 没有改变。因此，单击该按钮仍会将我带到上一课的 youtube 播放器。

【问题讨论】：

扩展 (firefox/chrome) 或用户脚本 (greasemonkey/tampermonkey) 将能够满足您的需求。不知道如何使用 IE 或 Edge 来做这件事 - 显然 Edge 会得到一些扩展的好处，但最后我听说，它是“即将到来”，而不是“这里”
@JaromandaX 我很想通过 Chrome 中的扩展程序或用户脚本来实现这一点
我建议从 tampermonkey 开始，然后，一旦您对代码感到满意，如果您愿意，可以将其转换为扩展。这就是我有时处理 Firefox 扩展的方式。但是，我不熟悉 chrome 扩展，因此，不确定将用户脚本移植到 chrome 扩展有多么容易（使用greasemonkey -> firefox 扩展非常简单）
@JaromandaX 我尝试使用 JavaScript 访问 iframe 以获取 src，但它说由于相同的来源政策，我不允许这样做
这根本不应该是一个问题，因为 iframe 是您文档的一个元素，我认为由于 src 属性只是一个字符串，所以根本没有域问题。也许你可以展示一些（最小的）代码，就像你说的那样

标签： javascript html youtube html5-fullscreen

【解决方案1】：

怎么样：

var ytVideoSrc = false;
$('.ng-scope').each(function () { // class may exist multiple time

    if ( $(this).data('ng-controller') == 'videoPlayer' ) // search for first player
    {
      ytVideoSrc = $(this).attr('src); // grab src and stop loop
      return false;
    }

});

if ( ytVideoSrc ) // src found, open pop-up
    window.open(ytVideoSrc, "my video"); // open new window with src.

编辑

为了防止播放器自动启动，只需修改该URL中的autoplay参数即可：

https://www.youtube.com/embed/OATi2nCjEoE?autoplay=1&color=red&controls=1&rel=0&showinfo=0&fs=1&theme=light&wmode=opaque&html5=1&enablejsapi=1&origin=https%3A%2F%2Fwww.udacity.com

 ytVideoSrc = ytVideoSrc.replace('autoplay=1', 'autoplay=0');

想了解如何集成YT播放器，可以看这里：https://developers.google.com/youtube/player_parameters?hl=en

【讨论】：

你的对我不起作用。我已经更新了我的临时脚本。我有一个问题，播放器似乎被注入了页面。在页面准备好找到src 后，我必须等待 2 秒。我也在寻找阻止嵌入式播放器自动播放的方法。
您不应该抓取内容，而是搜索YT URL，剩下的留给embed参数该网址
我认为我取得了重大进展。但是我的新问题是可以在不更改播放器的src 的情况下更改youtube 播放器的内容。请看我更新的问题。谢谢！