Замените часы YouTube <a><iframe> встроить видео

Question

Сегодня мой первый день с JavaScript и jQuery.

У меня есть опыт работы с HTML, PHP, Python, CSS.

По моему опыту, я нашел лучший способ научиться просто делать это, учиться по пути.

У меня была идея для расширения Chrome (нет подсказки, если это оригинал, я просто хотел узнать), где на YouTube вы наводите ссылку на видео и загружаете видео в iframe. Нажатие на него не то, что я делаю. На данный момент я просто использую зависание. Но я понятия не имею, как сделать его iframe.

manifest.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

Вы можете использовать .replaceWith() метод JQuery, чтобы просто заменить <a> с IFRAME как HTML текст с URL изменен с помощью .replace() и a 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. Вероятно, лучше с точки зрения пользовательского интерфейса выбрать одно место на странице, чтобы отобразить iframe и повторно использовать это местоположение. Потенциально даже лучше, было бы иметь вылет/всплывающее окно, которое отображает только iframe, пока ссылка зависает, а затем уничтожает ее, когда ссылка больше не витает.