javascript - 将 YouTube watch <a> 替换为嵌入视频的 &lt;iframe&gt;

Question

今天是我第一天接触 JavaScript 和 jQuery。

我有 HTML、PHP、Python、CSS 方面的经验。

根据我的经验，我发现最好的学习方法就是去做，边做边学。

我有一个 Chrome 扩展程序的想法(不知道它是否是原创的，我只是想学习)，在 YouTube 上，您将鼠标悬停在视频链接上，它会将视频加载到 iframe 中。点击获取它不是我正在做的事情。目前我只是使用悬停。但是，我不知道如何将其制作为 iframe。

ma​​nifest.json

{
  "name": "HoverTube",
  "description": "Hover over any video on YouTube and it will begin to play without even having to click it. Perfect for those who are tight on resources, and don't want to load a whole new page for just 1 video.",
  "version": "0.2",
  "manifest_version": 2,

  "content_scripts": [
    {
      "matches": [
        "https://www.youtube.com/*"
      ],
      "js": ["jquery-3.1.1.min.js", "hover.js"]
    }
  ]
}

hover.js

$('body').on('mouseenter', 'a', function(){
    if (this.href.includes("watch")){
            //Take this.href and convert it to <iframe width="560" height="315" src="https://www.youtube.com/embed/linkfromthehref" frameborder="0" allowfullscreen></iframe>
        }

    })

Answer 1

您可以使用 jQuery 的 .replaceWith() 方法只需替换 <a>将 iframe 作为 HTML 文本，并使用 .replace() 修改 URL和一个regular expression :

$('body').on('mouseenter', 'a', function(){
    if (this.href.includes("watch")){
        $(this).replaceWith('<iframe width="560" height="315" src="https://www.youtube.com/embed/' +this.href.replace(/[^=]*=/,'')+'" frameborder="0" allowfullscreen></iframe>');
    }
})

除了插入它之外，您还应该给它一个 ID。从 UI Angular 来看，在页面上选择一个位置来显示 iframe 并重用该位置可能会更好。可能更好的是，有一个飞出/弹出窗口，仅在链接悬停时显示 iframe，然后在链接不再悬停时销毁它。