javascript - 在页面上获取 Youtube 视频 ID 并设置为播放列表参数

Question

我有一个函数，我正在使用它来向页面上显示的任何 youtube 视频添加参数，它目前可以工作

 <p><iframe src="//www.youtube.com/embed/Vdwef9DF?start=1" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"  allow="autoplay"></iframe></p>

 const youtubeUrlPattern = /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/;

  [...document.querySelectorAll('iframe')].filter((iframeEl) => {
    // Filter to iframes loading YouTube URLs only.
    return iframeEl.src.match(youtubeUrlPattern);
  }).forEach((iframeEl) => {
    const a = document.createElement('a');
    a.href = iframeEl.src;
    a.search = a.search || '?';
    a.search += '&autoplay=1&mute=1&loop=1&rel=0';
    iframeEl.src = a.href;
  });

但是，我还想添加播放列表参数，例如&playlist={videoID}

在这种情况下，如何从任何 youtube url 获取 id 并创建一个变量来正确设置此播放列表属性？

标签： javascripthtmlyoutube