Как отобразить видео из тегов figure и oembed на сайте с помощью js?

Question

[junior_www]

Добрый день! Помогите, пожалуйста, если знакомо.

Текстовый редактор встраивает видео в таком формате

<figure class="media"><oembed url="https://youtu.be/sssssssssss"></oembed></figure>

Можете подсказать скрипт чтобы видео на сайте отображалось?

Answer 1

[V0VA]

Добрый день! Правильнее будет изменить настройки html редактора.
Но если нужно сразу на странице вывести, то можно попробовать так

document.querySelectorAll('figure.media').forEach(element => {
  element.outerHTML = '<div>' + element.innerHTML + '</div><hr>';
});

document.querySelectorAll('oembed').forEach(element => {
  let url = element.getAttribute('url');
  url = url.replace("watch?v=", "embed/");

  const newIframe = document.createElement("iframe");
  newIframe.setAttribute("width", "auto");
  newIframe.setAttribute("height", "auto");
  newIframe.setAttribute("allowFullScreen", "");
  newIframe.setAttribute("frameBorder", 0);
  if (url) {
    newIframe.setAttribute("src", url);
  }

  element.outerHTML = newIframe.outerHTML;  
 } );

Comments

[junior_www]

спасибо, большое! Немного доработал под проект, код рабочий, может кому сгодится

const videoMutator = () => {
	
  document.querySelectorAll('figure.media').forEach(element => {
    element.outerHTML = '<div>' + element.innerHTML + '</div>';
  });

  document.querySelectorAll( 'oembed' ).forEach( element => {
	let url = element.getAttribute( 'url' );
	newUrl = url.split('/');
	console.log(newUrl);
	if (newUrl[2] == "youtu.be") {
	url = "https://www.youtube.com/watch?v=" + newUrl[3];
	}
    url = url.replace("watch?v=", "embed/");
		   
  const newIframe = document.createElement("iframe");
    newIframe.setAttribute("width", "640");
    newIframe.setAttribute("height", "360");
    newIframe.setAttribute("allowFullScreen", "");
    newIframe.setAttribute("frameBorder", 0);
    if (url) {
     newIframe.setAttribute("src", url);
    }
	   
	element.outerHTML =  newIframe.outerHTML;   
	      	   
    });

}

setTimeout(videoMutator, 2000);