How can I embed a youtube video with markdown?

[marcmaurer99]

Anybody can help me how I can embed a youtube video with markdown in wiki.js?

Thanks!

Marc

[Phil-hostwiki]

Go to Admin Area -> Theme -> Code Injection

Under Head HTML Injection
insert the code below.

<script type="text/javascript" defer>
  const rxYoutube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/|shorts\/)?)([\w\-]+)(\S+)?$/

 const rxScreencast = /^.*^((?:https?:)?\/\/)?(www\.)?(screencast\.com)(\/users)\/([a-z0-9_-]+)\/folders\/([a-z0-9%_-]+)\/media\/([a-z0-9_-]+)(?:\/)?$/im

  window.boot.register('vue', () => {
    window.onload = () => {
      document.querySelectorAll('.contents oembed, .contents a').forEach(elm => {
        const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href')
        let newElmHtml = null
       
        const ytMatch = url.match(rxYoutube)
        const scMatch = url.match(rxScreencast)

 
        if (ytMatch) {
          newElmHtml = `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube-nocookie.com/embed/${ytMatch[5]}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
        
      } else if(scMatch) {
        newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`

        } else if (url.endsWith('.mp4')) {
          newElmHtml = `<video controls autostart="0" name="media" width="640" height="360"><source src="${url}" type="video/mp4"></video>`
        } else {
         return
         }

        const newElm = document.createElement('div') 
        newElm.classList.add('responsive-embed')
        newElm.insertAdjacentHTML('beforeend', newElmHtml)
        elm.replaceWith(newElm)
      })
    }  
  })
</script>

Under CSS Override

.responsive-embed {
  position: relative;
  padding-bottom: 56.2%;
  height: 0;
  margin: 10px 0;
  overflow: hidden;
}

.responsive-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

To embed any Youtube video, just paste the link to the video inside the markdown editor. e.g https://youtube.com/watch?v=qIsgdOVGA04

Practical screenshots below:
1.

I hope this helps.

[Philipinho]

Alright, I will have a look.

[Philipinho]

@mittkkoo Try this https://pastebin.com/raw/vp87cnkX

[mittkkoo]

Works! Now I understand what was going on with window.onload.

[mittkkoo]

@mittkkoo Try this https://pastebin.com/raw/vp87cnkX

Based on a comment by @NGPixel here I changed window.onload to this:

  window.boot.register('page-ready', () => {
    replaceGermanLocals();
    handleEmbeddedMedia();    
  })

[samuk10]

Go to Admin Area -> Theme -> Code Injection

Under Head HTML Injection insert the code below.

<script type="text/javascript" defer>
  const rxYoutube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/|shorts\/)?)([\w\-]+)(\S+)?$/

 const rxScreencast = /^.*^((?:https?:)?\/\/)?(www\.)?(screencast\.com)(\/users)\/([a-z0-9_-]+)\/folders\/([a-z0-9%_-]+)\/media\/([a-z0-9_-]+)(?:\/)?$/im

  window.boot.register('vue', () => {
    window.onload = () => {
      document.querySelectorAll('.contents oembed, .contents a').forEach(elm => {
        const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href')
        let newElmHtml = null
       
        const ytMatch = url.match(rxYoutube)
        const scMatch = url.match(rxScreencast)

 
        if (ytMatch) {
          newElmHtml = `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube-nocookie.com/embed/${ytMatch[5]}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
        
      } else if(scMatch) {
        newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`

        } else if (url.endsWith('.mp4')) {
          newElmHtml = `<video controls autostart="0" name="media" width="640" height="360"><source src="${url}" type="video/mp4"></video>`
        } else {
         return
         }

        const newElm = document.createElement('div') 
        newElm.classList.add('responsive-embed')
        newElm.insertAdjacentHTML('beforeend', newElmHtml)
        elm.replaceWith(newElm)
      })
    }  
  })
</script>

Under CSS Override

.responsive-embed {
  position: relative;
  padding-bottom: 56.2%;
  height: 0;
  margin: 10px 0;
  overflow: hidden;
}

.responsive-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

To embed any Youtube video, just paste the link to the video inside the markdown editor. e.g https://youtube.com/watch?v=qIsgdOVGA04

Practical screenshots below: 1.

I hope this helps.

Thanks i also managed it to work with google-drive videos!
Aqui está o código completo com a adição do suporte para vídeos do Google Drive:

<script type="text/javascript" defer>
  const rxYoutube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/|shorts\/)?)([\w\-]+)(\S+)?$/

  const rxScreencast = /^.*^((?:https?:)?\/\/)?(www\.)?(screencast\.com)(\/users)\/([a-z0-9_-]+)\/folders\/([a-z0-9%_-]+)\/media\/([a-z0-9_-]+)(?:\/)?$/im

  const rxDrive = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?(drive\.google\.com)\/file\/d\/([a-zA-Z0-9_-]+)\/.*$/i

  window.boot.register('vue', () => {
    window.onload = () => {
      document.querySelectorAll('.contents oembed, .contents a').forEach(elm => {
        const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href')
        let newElmHtml = null

        const ytMatch = url.match(rxYoutube)
        const scMatch = url.match(rxScreencast)

        if (ytMatch) {
          newElmHtml = `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube-nocookie.com/embed/${ytMatch[5]}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
        } else if (scMatch) {
          newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`
        } else if (url.endsWith('.mp4')) {
          newElmHtml = `<video controls autostart="0" name="media" width="640" height="360"><source src="${url}" type="video/mp4"></video>`
        } else {
          const driveMatch = url.match(rxDrive)
          if (driveMatch) {
            const driveId = driveMatch[4]
            newElmHtml = `<iframe id="driveplayer" type="text/html" width="640" height="360" src="https://drive.google.com/file/d/${driveId}/preview" frameborder="0" allowfullscreen></iframe>`
          } else {
            return
          }
        }

        const newElm = document.createElement('div') 
        newElm.classList.add('responsive-embed')
        newElm.insertAdjacentHTML('beforeend', newElmHtml)
        elm.replaceWith(newElm)
      })
    }  
  })
</script>

[bjoliveau]

Do you have similar advice to embed video from Google Drive ?

[tr1age]

I am unable to get this to work for some reason on my server. All youtube embeds just don't show up. I put your code not only in the HTML inject but in the seperate page as well to see. Nada. Any help would be much appreciated!

[Philipinho]

Could you please verify the Chrome console for any potential errors when you load the page and inform me about them?

[MildlyInterested]

<script type="text/javascript">
  function replaceGermanLocals() {
    var x = document.getElementsByClassName("text-none");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].innerText = x[i].innerText.replace(/Kommentar veröffentlichen/g, 'OK');
    }
  }

  const rxYoutube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/|shorts\/)?)([\w\-]+)(\S+)?$/
  const rxScreencast = /^.*^((?:https?:)?\/\/)?(www\.)?(screencast\.com)(\/users)\/([a-z0-9_-]+)\/folders\/([a-z0-9%_-]+)\/media\/([a-z0-9_-]+)(?:\/)?$/im

  function handleEmbeddedMedia() {
    document.querySelectorAll('.contents oembed, .contents a').forEach(elm => {
      const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href');
      let newElmHtml = null;

      const ytMatch = url.match(rxYoutube);
      const scMatch = url.match(rxScreencast);

      if (ytMatch) {
        newElmHtml = `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube-nocookie.com/embed/${ytMatch[5]}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
      } else if (scMatch) {
        newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`;
      } else if (url.endsWith('.mp4')) {
        newElmHtml = `<video controls autostart="0" name="media" width="640" height="360"><source src="${url}" type="video/mp4"></video>`;
      } else {
        return;
      }

      const newElm = document.createElement('div');
      newElm.classList.add('responsive-embed');
      newElm.insertAdjacentHTML('beforeend', newElmHtml);
      elm.replaceWith(newElm);
    });
  }

  window.boot.register('page-ready', () => {
    replaceGermanLocals();
    handleEmbeddedMedia();    
  })
</script>

into Head HTML injection found in the "Theme" section and insert your youtube link via CTRL+K.

[Philipinho]

@MildlyInterested I hope it worked well for you. Although, you may not need the "replaceGermanLocals();".

[madman9999]

please delete

[Mubeen142]

There's a much easier way to do this

Add the following to where you want the iframe to load on the page, wiki js will give it an id of youtube-video

### YouTube Video 

Then click on page, click on scripts, here you can define the page script for each page

<script>
window.onload = function() {
    document.getElementById('youtube-video').outerHTML = '<iframe width="100%" height="550" src="https://www.youtube.com/embed/Q-0T3uA225Y?si=golv8OHBelfG_mXq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
};
</script>

Add this code into the script. Replace the URL with your youtube's URL

[mittkkoo]

Well this is definitely not easier. With the method described above in this thread you only need to paste the Youtube URL and that's it.
But I will note down the tweak to get an element id by defining a subcaption!

[AlexBor-89]

Версия кода для работы с RuTube:

Переопределение CSS (Без изменений):

.responsive-embed {
  position: relative;
  padding-bottom: 56.2%;
  height: 0;
  margin: 10px 0;
  overflow: hidden
}
.responsive-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px
}

А вот внедрение в HTML:

<script type="text/javascript" defer>
  const rxYoutube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/|shorts\/)?)([\w\-]+)(\S+)?$/
  const rxScreencast = /^.*^((?:https?:)?\/\/)?(www\.)?(screencast\.com)(\/users)\/([a-z0-9_-]+)\/folders\/([a-z0-9%_-]+)\/media\/([a-z0-9_-]+)(?:\/)?$/im
  const rxDrive = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?(drive\.google\.com)\/file\/d\/([a-zA-Z0-9_-]+)\/.*$/i
  const rxRuTube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?(rutube\.ru)\/video\/([\w\-]+)(\S+)?$/

  window.boot.register('vue', () => {
    window.onload = () => {
      document.querySelectorAll('.contents oembed, .contents a').forEach(elm => {
        const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href')
        let newElmHtml = null
        const ytMatch = url.match(rxYoutube)
        const scMatch = url.match(rxScreencast)
        const rtMatch = url.match(rxRuTube)

        if (ytMatch) {
          newElmHtml = `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube-nocookie.com/embed/${ytMatch[5]}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
        } else if (scMatch) {
          newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`
        } else if (rtMatch) {
          newElmHtml = `<iframe id="rtplayer" type="text/html" width="640" height="360" src="https://rutube.ru/play/embed/${rtMatch[4]}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
        } else if (url.endsWith('.mp4')) {
          newElmHtml = `<video controls autostart="0" name="media" width="640" height="360"><source src="${url}" type="video/mp4"></video>`
        } else {
          const driveMatch = url.match(rxDrive)
          if (driveMatch) {
            const driveId = driveMatch[4]
            newElmHtml = `<iframe id="driveplayer" type="text/html" width="640" height="360" src="https://drive.google.com/file/d/${driveId}/preview" frameborder="0" allowfullscreen></iframe>`
          } else {
            return
          }
        }

        const newElm = document.createElement('div')
        newElm.classList.add('responsive-embed')
        newElm.insertAdjacentHTML('beforeend', newElmHtml)
        elm.replaceWith(newElm)
      })
    }
  })
</script>