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

URLとHTMLテキストを使用して修正されたあなただけのiframeで<a>を置き換えるためにjQueryの.replaceWith()メソッドを使用することができます.replace()および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の観点からは、ページ上の1つの場所を選択してiframeを表示し、その場所を再利用する方がよいでしょう。潜在的にさらに優れているのは、リンクが上がっている間にiframeだけを表示し、リンクがもはや上がっていないときにiframeを破棄するフライアウト/ポップアップを持つことです。