js使用iframe引入youtube視頻到頁面中播放,解決跨域播放

首先肯定要能翻牆了，才能播放youtube視頻

直接上代碼

這裏的主要原理是使用的embed-container,這是一個html的 class

實際標籤是這樣的，iframe中引入的youtube視頻鏈接，不建議寫這麼複雜，看下面

<div class="edy-texteditor-container embed-container edy-positionable-container-maxwidth" contenteditable="false" unselectable="on" style="max-width: 100%; overflow: hidden; position: relative; width: auto;">

<div class="edy-padding-resizer-wrapper" style="padding-bottom: 56.25%;">

<iframe id="ifrId" src="//www.youtube.com/embed/v4NYCh_nBYU?wmode=transparent" frameborder="0" style="position: absolute; display: block; width: 100%; height: 100%;"></iframe>

</div>

</div>

但是其實只要把鏈接修改一下就好了，下面是我動態js創建的iframe,然後把youtube

視頻鏈接轉換一下，放到iframe的src上，然後再添加到div中就可以加載出youtube視頻（需要翻牆了），可以點擊觀看

url 就是帶有https/http鏈接的，這裏是https,例如url= 'https://www.youtube.com/watch?v=pqkMbz2MIKA'

 

let tmpUrl  = url.replace('https:','')  // 去掉https:

// watch?轉化成embed/,添加wmode,這個wmode可以自己去學習看看

  tmpUrl = tmpUrl.replace('watch?v=','embed/')+'?wmode=transparent' 

// 然後創建iframe,使用哪個tmpUrl就可以了
  var exec_obj = document.createElement('iframe'); 
exec_obj.name = 'tmp_frame'; 
exec_obj.src = tmpUrl ; //可以訪問controller攜帶參數
//exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);