Question

我有一个通过CMS创建的页面，当前页面如下：

<!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <p><iframe src="//www.youtube.com/embed/id?start=1" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"  allow="autoplay"></iframe></p>
 </body>
 </html>

我已经看到了与我需要的东西类似的东西，但是有一种特别的方法可以使用JS块，这样，只要我拥有带有youtube网址的iframe，我都可以在其中添加“＆autoplay = 1＆mute = 1”要获取的源URL：

<!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <p><iframe src="//www.youtube.com/embed/id?start=1&autoplay=1&mute=1" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"  allow="autoplay"></iframe></p>
 </body>
 </html>

Answer 1

在脚本中获取iframe元素，然后使用.setAttribute（）

let myFrame = document.getElementById('idOfMYFrame')
myFrame.setAttribute('mute': '1')
myFrame.setAttribute('autoplay' : '1')

您可能需要在window.onload事件中执行此操作。

Answer 2

是的，这是可能的。首先，让我们按照我们认为具有YouTube内容的内容过滤掉页面上的所有iframe。为此，我们将在URL上使用RegEx。（另请参见：Regex for youtube URL）

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

接下来，我们将查询所有iframe，实际上是进行过滤。然后，我们将编辑URL。

[...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 || '?'; // Ensure we have a minimal query string
  a.search += '&autoplay=1&mute=1'; // Naively concatenate our extra params.  (You may want to do more here, to see if they already exist.)
  iframeEl.src = a.href;
});

请注意，我正在使用a元素来为我完成一些URL解析工作。（另请参见：https://stackoverflow.com/a/4497576/362536）。

我在JSFiddle上为您提供了一个示例：https://jsfiddle.net/3y251ued/

将查询字符串参数添加到iframe中的YouTube URL

2 个答案: