Добавить параметры строки запроса в URL YouTube в iframe - PullRequest
Новая
       2

Добавить параметры строки запроса в URL YouTube в iframe

1 голос
/ 01 мая 2019

У меня есть страница, созданная с помощью 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блокировать, чтобы в любое время у меня был iframe с URL-адресом YouTube, я могу добавить «& 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>

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Да, это возможно.Во-первых, давайте отфильтруем все фреймы на вашей странице по тем, которые, по нашему мнению, имеют контент YouTube.Для этого мы будем использовать RegEx на URL.(См. Также: Regex для URL-адреса YouTube ) 

// 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/

1 голос
/ 01 мая 2019

В вашем скрипте получите элемент iframe, а затем используйте .setAttribute () 

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

Возможно, вам потребуется сделать это в событии window.onload.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...