How can I embed a youtube video with markdown? #4580

marcmaurer99 · 2021-10-11T21:12:29Z

marcmaurer99
Oct 11, 2021

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

Thanks!

Marc

Phil-hostwiki · 2021-10-25T16:10:02Z

Phil-hostwiki
Oct 25, 2021

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.

22 replies

Philipinho Mar 15, 2023

Alright, I will have a look.

Philipinho Mar 15, 2023

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

mittkkoo Mar 16, 2023

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

mittkkoo Mar 24, 2023

@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 May 11, 2023

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 · 2022-08-31T17:07:42Z

bjoliveau
Aug 31, 2022

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

0 replies

tr1age · 2023-03-23T19:41:14Z

tr1age
Mar 23, 2023

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!

3 replies

Philipinho Mar 23, 2023

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

MildlyInterested Mar 25, 2023

<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 Mar 25, 2023

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

madman9999 · 2023-04-14T18:57:03Z

madman9999
Apr 14, 2023

please delete

0 replies

Mubeen142 · 2023-11-04T17:11:29Z

Mubeen142
Nov 4, 2023

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

1 reply

mittkkoo Nov 4, 2023

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 · 2024-10-22T11:02:00Z

AlexBor-89
Oct 22, 2024

Версия кода для работы с 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>

0 replies

BPowell76 · 2024-11-03T17:04:08Z

BPowell76
Nov 3, 2024

If you enable iframe usage on your site, you can just use the <iframe></iframe> block in markdown to render the video. W3C outlines more of how to display a video using iframes.

If using YouTube as your video source, they generate the iframe tag for you if you go to Share > Embed

0 replies

Maelstromeous · 2025-02-06T20:36:45Z

Maelstromeous
Feb 6, 2025

I can confirm if you do this, you can use embeds for YouTube:

Open Admin Settings
Go to Modules -> Rendering
Go to HTML
Security
Enable Allow iFrames.

In order to use this, you need to convert your page to raw HTML. For most people this may a bridge too far, but it's pretty simple to learn.

When the page has been converted to HTML, you can then go to the YouTube video you wish to embed, press Share, then Embed and there's some code for you to copy and paste in there.

Save the page, and it should render. If the video says "Watch on YouTube" they have turned off embedding (usually cos adverts).

0 replies

Uh oh!

How can I embed a youtube video with markdown? #4580

Uh oh!

Replies: 8 comments · 26 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 8 comments 26 replies