cant upload videos ''this media not support"

[SebastianMacaya]

OS: Windows_NT (win32) 10.0.17763 x64
Wiki.js version: 2.0.0
Database engine: PostgreSQL 14`

Cant upload videos from https://www.screencast.com on visual editor

[jd-apprentice]

I'm having this same issue, any updates?

[Phil-hostwiki]

Wiki.js WYSIWYG editor (Ckeditor5) natively supports only a handful of providers such as Dailymotion, Spotify, Youtube, Vimeo, Instagram, Twitter, GoogleMaps, Flickr and Facebook.
However, you can still use the Wiki.js code injection to add embed support for screencast.com, just like I detailed here #4580 (comment) for YT. With only a few customizations, you can reuse the code for Screencast support.
If you encounter any issues trying to make it work with Screencast, let me know so I can provide a custom code for it.

[SebastianMacaya]

I can actually inject them via html5 tag iframe, but these are removed when making any changes in the visual editor- , I would appreciate if you can give me the custom code @Phil-hostwiki , Thanks for everything

[Phil-hostwiki]

Sure I can help with that. Please share possible URLs of a Screencast video so I can work out the regex.

[SebastianMacaya]

Possible URL syntax https://www.screencast.com/t/DEguM5AsSjwd or https://www.screencast.com/users/SebastinMacaya/folders/Default/media/f316e8f9-c108-4df0-8002-c7979f2409f7

[Sancaf]

I´m also getting the same error: all iframes embedded in the html are deleted after making any change in the visual editor

[Phil-hostwiki]

Thanks for the info.
It turns out embed is only available on the long URL pattern.
https://www.screencast.com/users/xxxxxxxxxxxx/folders/Default/media/xxxxxxxxxx/embed
I'm working out the solution.

[Phil-hostwiki]

Go to Admin Area -> Theme -> Code Injection.
Under Head HTML Injection insert the code below

<script type="text/javascript" defer>
 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('.is-external-link').forEach(elm => {
        const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href')
        let newElmHtml = null
       
        const scMatch = url.match(rxScreencast)

     if(scMatch) {
        newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`
        } 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;
}

Then "Apply" changes.

To embed any Screencast video, insert the linkable long URL of the video inside the WYSIWYG. (Make sure it is hyperlinked) e.g https://www.screencast.com/users/xxxxxxxxxxxx/folders/Default/media/xxxxxxxxxx

You can see a live example here.

[SebastianMacaya]

Thank you very much for the speed and dedication. You are amazing
Edit: works correctly but eliminates the operation of youtube videos and other providers
. i use #4580 (comment) and your new solution and both together don't work

[Phil-hostwiki]

I see. Share your original code so I can integrate Screencast in addition to other providers without breaking things.

[SebastianMacaya]

CSS Override

.v-main .contents ul:not(.tabset-tabs) > li:before {
  position: absolute;
  content: "▸";
  font-size: 30px;
  top: -.7rem!important;
  color: #31c7ff!important;
  width: 2rem;
  margin: none
}
.v-main .contents p {
  padding: 0!important
}
img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 0 0 0
}
.v-main .contents blockquote {
  padding: 1px!important;
  border-left: none!important;
  border-radius: none;
  margin: none;
  position: relative;
  border: 1.5pt solid #2d6fcf!important
}
blockquote p {
  background-color: none!important;
  background: #e6e6e6;
  padding: 0;
  page-break-inside: avoid;
  page-break-after: avoid
}
figcaption {
  display: flex;
  margin-bottom: 1em
}
.figure__number {
  font-weight: 700
}
.figure__description {
  flex: 1;
  display: flex;
  justify-content: center;
  font-style: italic;
  padding-left: 2em
}
@media only screen and (max-width:640px) {
  .video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0
  }
  .video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
  .video-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
}

HTML Injection

<script>
setTimeout(function(){
 const noBreak = document.getElementsByTagName("p")
 const figCaption = document.getElementsByTagName("figcaption")
    for(i = 0; i < noBreak.length; i ++){
        if(noBreak[i].innerText.length < 8){
            noBreak[i].parentNode.removeChild(noBreak[i]);
        }
      }

    for(i = 0; i < figCaption.length; i ++){
        let figCaptionText = figCaption[i].innerHTML
        let array = figCaptionText.split(' ')
        array.unshift(`<span class="figure__number">Figure ${i + 1}.</span><span class="figure__description">`)
        array.push('</span>')
        figCaptionText = array.join(' ')
        figCaption[i].innerHTML = figCaptionText
      }
  }, 100);
</script>
<script type="text/javascript" defer>
window.boot.register('vue', () => {
    window.onload = function InteractiveVideos() {
        document.querySelectorAll('oembed, a').forEach(elm => {
            if (elm.hasAttribute('url')) { url = elm.getAttribute('url') } else { url = elm.getAttribute('href') }
            newElm = document.createElement('div')
            newElm.classList.add('video-responsive')            
            rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
            if (url.match(rx)) {
                newElm.insertAdjacentHTML('beforeend', `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/${url.match(rx)[1]}" frameborder="0" allowfullscreen></iframe>`)
                elm.replaceWith(newElm)
            }
            rx = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
            if (url.match(rx)) {
                newElm.insertAdjacentHTML('beforeend', `<iframe id="vmplayer" type="text/html" width="640" height="360" src="https://player.vimeo.com/video/${url.match(rx)[5]}" frameborder="0" allowfullscreen></iframe>`)
                elm.replaceWith(newElm)
            }
            rx = /^(.*\.(?:(mp4)$))/;
            if (url.match(rx)) {
                newElm.insertAdjacentHTML('beforeend', `<video controls autostart="0" name="media" width="640" height="360"><source src="${url.match(rx)[1]}" type="video/mp4"></video>`)
                elm.replaceWith(newElm)
            }
        })
    }
})
</script>

[Phil-hostwiki]

I edited your code to add support for Screencast. No changes were made to existing functionalities.

Head HTML Injection

<script>
setTimeout(function(){
 const noBreak = document.getElementsByTagName("p")
 const figCaption = document.getElementsByTagName("figcaption")
    for(i = 0; i < noBreak.length; i ++){
        if(noBreak[i].innerText.length < 8){
            noBreak[i].parentNode.removeChild(noBreak[i]);
        }
      }

    for(i = 0; i < figCaption.length; i ++){
        let figCaptionText = figCaption[i].innerHTML
        let array = figCaptionText.split(' ')
        array.unshift(`<span class="figure__number">Figure ${i + 1}.</span><span class="figure__description">`)
        array.push('</span>')
        figCaptionText = array.join(' ')
        figCaption[i].innerHTML = figCaptionText
      }
  }, 100);
</script>
<script type="text/javascript" defer>

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 = function InteractiveVideos() {
        document.querySelectorAll('oembed, a').forEach(elm => {
            if (elm.hasAttribute('url')) { url = elm.getAttribute('url') } else { url = elm.getAttribute('href') }
            newElm = document.createElement('div')
            newElm.classList.add('video-responsive')            
            rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
            if (url.match(rx)) {
                newElm.insertAdjacentHTML('beforeend', `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/${url.match(rx)[1]}" frameborder="0" allowfullscreen></iframe>`)
                elm.replaceWith(newElm)
            }
            rx = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
            if (url.match(rx)) {
                newElm.insertAdjacentHTML('beforeend', `<iframe id="vmplayer" type="text/html" width="640" height="360" src="https://player.vimeo.com/video/${url.match(rx)[5]}" frameborder="0" allowfullscreen></iframe>`)
                elm.replaceWith(newElm)
            }
            rx = /^(.*\.(?:(mp4)$))/;
            if (url.match(rx)) {
                newElm.insertAdjacentHTML('beforeend', `<video controls autostart="0" name="media" width="640" height="360"><source src="${url.match(rx)[1]}" type="video/mp4"></video>`)
                elm.replaceWith(newElm)
            }
			
        })
		
	// Screencast embed
	document.querySelectorAll('.is-external-link').forEach(elm => {
        const url = elm.hasAttribute('url') ? elm.getAttribute('url') : elm.getAttribute('href')
        let newElmHtml = null
       
        const scMatch = url.match(rxScreencast)
        if(scMatch) {
           newElmHtml = `<iframe id="scplayer" type="text/html" width="640" height="360" src="${url}/embed" frameborder="0" allowfullscreen></iframe>`
          
        } else {
          return
        }
       
        const newElm = document.createElement('div') 
        newElm.classList.add('responsive-embed')
        newElm.insertAdjacentHTML('beforeend', newElmHtml)
        elm.replaceWith(newElm)

        
      })
	  
    }
})
</script>

CSS Override

.v-main .contents ul:not(.tabset-tabs) > li:before {
  position: absolute;
  content: "▸";
  font-size: 30px;
  top: -.7rem!important;
  color: #31c7ff!important;
  width: 2rem;
  margin: none
}
.v-main .contents p {
  padding: 0!important
}
img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 0 0 0
}
.v-main .contents blockquote {
  padding: 1px!important;
  border-left: none!important;
  border-radius: none;
  margin: none;
  position: relative;
  border: 1.5pt solid #2d6fcf!important
}
blockquote p {
  background-color: none!important;
  background: #e6e6e6;
  padding: 0;
  page-break-inside: avoid;
  page-break-after: avoid
}
figcaption {
  display: flex;
  margin-bottom: 1em
}
.figure__number {
  font-weight: 700
}
.figure__description {
  flex: 1;
  display: flex;
  justify-content: center;
  font-style: italic;
  padding-left: 2em
}
@media only screen and (max-width:640px) {
  .video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0
  }
  .video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
  .video-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
}

.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;
}

[SebastianMacaya]

thanks for your answer now all the links are shown as if they were videos or null

before

after

[Phil-hostwiki]

thanks for your answer now all the links are shown as if they were videos or null

The code has been updated to include a return statement. That should do the trick.

[SebastianMacaya]

verified, everything works correctly!! Thanks