Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Video is not rendered in view mode, but is ok in edit mode #1459

Open
akavato opened this issue Feb 10, 2020 · 91 comments
Open

Video is not rendered in view mode, but is ok in edit mode #1459

akavato opened this issue Feb 10, 2020 · 91 comments
Assignees
@NGPixel
Labels
contrib-medium Medium dev difficulty for contribution enhancement

Comments

@akavato
Copy link

akavato commented Feb 10, 2020 •
edited
Loading

Describe the bug
Youtube embedded video is not rendered in view mode, but is ok in edit mode

To Reproduce
Steps to reproduce the behavior:

  1. Embed videon on page
  2. Save page
  3. Open page in preview mode

Expected behavior
Video should be rendered for viewing, but it's invisible.

Host Info (please complete the following information):

  • OS: Ubuntu 18.04
  • Wiki.js version: 2.1.107
  • Database engine: PostgreSQL 12.1
@Jhobean
Copy link

Jhobean commented Feb 10, 2020 •
edited
Loading

Same here. On the night mode.
Google chrome on windows 10

@NGPixel NGPixel added contrib-medium Medium dev difficulty for contribution enhancement labels Feb 15, 2020
@NGPixel
Copy link
Member

NGPixel commented Feb 15, 2020

Videos are not yet supported in the rendering pipeline.

@joppehoekstra
Copy link

Any idea as to when this will be implemented?

@newfoundfreedom
Copy link

I too have just discovered this bug. Embed video shows just fine in edit mode (whether using Markdown or WYSIWYG editors), but page render fails.

Thanks for all the hard work on this app - embed vids would really help.

@brewerc1
Copy link

brewerc1 commented Apr 9, 2020

Videos are not yet supported in the rendering pipeline.

Perhaps a good approach would be to hide the interface element for features that are not yet supported.

@joppehoekstra joppehoekstra mentioned this issue Apr 13, 2020
Closed
@despens
Copy link
Contributor

despens commented May 10, 2020

It is possible to embed videos via iframes if HTML sanitation is turned off in Administration→Rendering→HTML→Security→Sanitize HTML

@grandixximo
Copy link

Also came across this, hope the feature will be implemented soon!

@j0lol
Copy link

j0lol commented Jun 4, 2020

It is possible to embed videos via iframes if HTML sanitation is turned off in Administration→Rendering→HTML→Security→Sanitize HTML

is it possible to embed iframes in the WYSIWYG or markdown editor?

@ccolella-mdc
Copy link

ccolella-mdc commented Jun 9, 2020 •
edited
Loading

While I am able to use iframes thanks to @despens suggestion, the content fails to load when I am using assets that are uploaded into the editor's asset manager. I was able to display these through a hack before the latest update but now I cannot anymore.

While most of my users can figure out an iframe (either through google, asking me, or looking at an example I did) they cannot upload assets elsewhere like I can.

@dude1756
Copy link

Is there any timeline for implementing support for videos in rendering pipeline? And will this include local video assets? I really like wiki.js but building up a user manual without videos is a bit frustrating. Hope this can be fixed soon.

@tenwalls
Copy link

tenwalls commented Jul 6, 2020

Ooh, just encountered this issue. Good there is a temporary workaround

@KingRial KingRial mentioned this issue Jul 9, 2020
Closed
@gengue
Copy link

gengue commented Aug 12, 2020

Videos still not showing, even with "Allow frames" on and "Sanitize HTML" off.

@ideasandpixels
Copy link

Anything here? Pretty big deal.

@ccolella-mdc
Copy link

ccolella-mdc commented Aug 19, 2020 •
edited
Loading

this embed share link code from youtube works for me:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/Mh5LY4Mz15o"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

And changing the source to a local video also works:

<iframe 
    width="560" 
    height="315" 
    src="/video/test.mp4"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

note: it still works without the allow attribute and that content but i'm not sure if that help it with anything. maybe on mobile. and you can play with the hight and width, or use css for them. Like this:

<iframe 
    width="560" 
    height="315"
    src="/video/test.mp4"
    frameborder="0"
    allowfullscreen>
</iframe>

My Settings:

Security > Block IFrame Embedding: off
Rendering > html > Sanitize HTML: on
Rendering > html > Allow iframes: on

the first one allows you assets to be loaded in an iframe. The third one allows you to have an iframe on your site.
The middle one can be set to either one but on does not hidner you in doing this.

@Jhobean Jhobean mentioned this issue Aug 27, 2020
Closed
@ryanmasuga ryanmasuga mentioned this issue Oct 9, 2020
Open
@ryanmasuga
Copy link

Would love to have this feature without needing any type of workaround, because I agree with @dude1756 that a "building up a user manual without videos is a bit frustrating".

I tried @ccolella-mdc's settings and can get videos to show in Markdown, but I couldn't get WYSIWYG to work.

What I did for responsively sized videos in Markdown:

  1. Grabbed YouTube CSS example from https://embedresponsively.com/
  2. Put only the 'embed-container' div/iframe into the markdown code
  3. Added the "embed-container" CSS to the "Head HTML Injection" field in our theme at Administration > Theme so that this CSS is available on any page we create.

injected-embed-css

So now we add:

<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/xxx' frameborder='0' allowfullscreen></iframe>
</div>

on any page where we need a responsively sized YouTube video.

@ryanmasuga
Copy link

Further - does anyone have a clear explanation of how to get an iframe to show on a WYSIWYG page? I must be confused - I don't see any way to edit source directly on a WYSIWYG page, so I'm not clear how to manually embed an iframe that would actually output an iframe. Is this only possible with the Markdown page type?

@ccolella-mdc
Copy link

ccolella-mdc commented Oct 9, 2020 •
edited
Loading

@ryanmasuga It also works (surprise, surprise) on the HTML editor. I don't use the WYSIWYG editor because it has so many fewer features, and, as a software engineer myself, it feels too limiting.

@NGPixel
Copy link
Member

NGPixel commented Oct 9, 2020

@ryanmasuga The WYSIWYG editor is not an HTML editor and it's not possible to edit / insert HTML code because CKEditor 5 simply doesn't have that feature.

Use the Markdown editor if you need to edit / insert HTML code in your page.

@ryanmasuga
Copy link

@ccolella-mdc I hadn't tried the HTML page type yet, but yes - the responsive embed code works there, too.

@NGPixel Thanks. I know some WYSIWYG editors have a "Source" button that can expose the underlying HTML (useful for when something gets so bungled you have to manually fix it...), but I guess that's not the case here. We'll likely carry on with Markdown pages.

@Jhobean
Copy link

Jhobean commented Oct 9, 2020

I think There a solution in progress by @KingRial #2160.

Me too I need this implementation...

@idimitrakopoulos
Copy link

idimitrakopoulos commented Jan 7, 2021 •
edited
Loading

Another solution is to use youtube's video images to display the video until this is fixed.

i.e.

http://img.youtube.com/vi/{video-id}/0.jpg

Like so ...

[![Audi R8](http://img.youtube.com/vi/KOxbO0EI4MA/0.jpg)](https://www.youtube.com/watch?v=KOxbO0EI4MA "Audi R8")

Technically this is NOT embedding (link is opened in new tab) but for our case it works until it's fixed.

Oh and this only works in Markdown. WYSIWYG editor doesn't have the functionality to link an external image :(

@felixgoldstein
Copy link

+1

@jebr
Copy link

jebr commented Jan 29, 2021

Is the fix for this issue planned in an upcoming release?

@grandixximo
Copy link

grandixximo commented Jan 19, 2023 •
edited
Loading

image

try to disable that

@cyb3rathl3t3
Copy link

@grandixximo thank you so much for your response. I disabled the block iframe under the security tab as instructed. Once again I attempted to share a youtube share link https://youtu.be/-mgenFHmCG4 by using the insert media function. However, I was foiled yet again. No positive results. I truly don't understand why this feature isn't enabled from the start. It is Paramount for any wiki.

I really appreciate your help. Any other suggestions?

@BitWiseSE
Copy link

BitWiseSE commented Jan 19, 2023 via email

@cyb3rathl3t3
Copy link

@BitWiseSE Thank you for all your help! I am running version 2.5.295. I tried your code as suggested copied and pasted into the Head HTML section in the settings Theme area. I also took a moment to double check Modules > Rendering > HTML > Allow-iFrames area. Which in my case it was disabled, so I did enable that option. Also reviewed block iframe and that was also enabled. In any case, I tried again and unfortunately it failed. I even tried the body section and that failed also. I don't know what could be causing this issue but its been since the start. I have been unable to add video since original install. Docker Container Ubuntu. Any other suggestions? I really appreciate the help from the board. Thank you

@BitWiseSE
Copy link

BitWiseSE commented Jan 20, 2023 via email

@cyb3rathl3t3
Copy link

I understand the logic behind the network suggestion. However, other remote admins have the same issue. I do appreciate your help, but I am also at a loss. Like I think I have exhausted literally every option. Thank you for your help. I am not really quite sure where to go from here.

@cyb3rathl3t3
Copy link

@BitWiseSE
Opera Snapshot_2023-01-20_144746_wiki tutor com
Here is an image of the location of the code injection

@cyb3rathl3t3
Copy link

@BitWiseSE here is a YouTube video link https://youtu.be/-mgenFHmCG4 (I have tried using)

@cyb3rathl3t3
Copy link

I normally go into the Edit Mode for the home page and paste the YouTube link in the insert media option for
Opera Snapshot_2023-01-20_145215_wiki tutor com
the location desired.
Opera Snapshot_2023-01-20_145053_wiki tutor com

@cyb3rathl3t3
Copy link

@BitWiseSE shows up fine in edit mode
Opera Snapshot_2023-01-20_145334_wiki tutor com
Just not in live mode! :-(

@cyb3rathl3t3
Copy link

Does this take time? like Propagation?

@BitWiseSE
Copy link

BitWiseSE commented Jan 20, 2023 via email

@grandixximo
Copy link

Modules > Rendering > HTML > Allow-iFrames

Should not be enabled

@grandixximo
Copy link

Does this take time? like Propagation?

No, but you have to render the pages again, do some changes and save again should do it.

@dapug
Copy link

dapug commented Feb 2, 2023

I have done everything that @cyb3rathl3t3 has described and gotten the exact same results.

I'm also a little perplexed as to how this is an OPEN issue since Feb 2020, no fix, and the work-around is to open up XSS vulnerabilities, AND... still no love.

I mean, video is a pretty big deal. Is the entire industry user base of this not struggling?

@cyb3rathl3t3
Copy link

cyb3rathl3t3 commented Feb 2, 2023 •
edited
Loading

@dapug Please don't misunderstand, I am sorry you are experiencing the same frustration I am. However, I am so relieved to hear that someone else is having the same issue. It is still not a functional feature on my end. As you correctly mentioned. How could this feature go on abandoned for so long? Video is an integral part of any Platform. I don't understand.

@fumbles
Copy link

fumbles commented Mar 18, 2023 •
edited
Loading

I got youtube videos to work kinda in markdown

<iframe
    width="640"
    height="480"
    src="https://www.youtube.com/embed/UmX4kyB2wfg"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen
>
</iframe>

image

@Squadz
Copy link

Squadz commented Jun 18, 2023 •
edited
Loading

Description:

  • Video is not rendered in view mode

Tested with:

  • Visual Editor : Video player is appearing, but not in the rendered view.
  • Markdown / HTML Raw : Tried the <Iframe> from Youtube, nothing happen
  • Tried with all security disabled, same issue
  • Latest version of WikiJS + Docker + SSL Enabled

@NGPixel What's the current status of this issue ? any new workarounds ?

@cyb3rathl3t3
Copy link

It's not been addressed or fixed as far as I can tell. I have been checking up on it and the issue remains.

@grandixximo
Copy link

@cyb3rathl3t3 Work around posted here works for me, can you post pictures of your rendering HTML security settings? and your security settings? make sure you apply and refresh them. also post the theming injection screenshot? also look at the console by pressing F12 on your browser if you see any errors there. Would you be willing to share admin access to your setup or a clean one for me to check? [email protected] i've created this temporary mail for you to share the details, if you can run a new install I'll fix it on that.

@GabrielBaritz
Copy link

The solution with the injectable code does not work.

@villaflaminio
Copy link

One solution (not very convenient) that I found is to directly upload the video to wikijs as a resource.

  1. Enable Modules > Rendering > HTML > Allow-iFrames

  2. upload the file

image
  1. convert page editor to RAW Html
image
  1. insert where desired the HTML code (Warning, replace videoplayback(1).mp4 with the correct name of the uploaded resource):
<video  controls>
<source src="/videoplayback_(1).mp4" type="video/mp4">
</video>
  1. The video will be displayed correctly
image

@kimegede
Copy link

kimegede commented Jan 2, 2024 •
edited
Loading

Are we getting closer to a solution on this please?

@8fm7
Copy link

8fm7 commented Jan 8, 2024

Dear @grandixximo , I used your instructions, but they didn't help me. However, with some edits, I managed to fix the error. Thank you very much!)

A UFO flew by and drop this:

<script type="text/javascript" defer>
  const rxYoutube = /^.*^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/
  const rxVimeo = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/

  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 vmMatch = !ytMatch && url.match(rxVimeo)
        if (ytMatch) {
          const startTime = ytMatch[6] && ytMatch[6].includes("?t=") ? ytMatch[6].replace("?t=", "?start=") : "";
          newElmHtml = `<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/${ytMatch[5]}${startTime}" frameborder="0" allowfullscreen></iframe>`
        } else if (vmMatch) {
          newElmHtml = `<iframe id="vmplayer" type="text/html" width="640" height="360" src="https://player.vimeo.com/video/${vmMatch[5]}" 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('video-responsive')
        newElm.insertAdjacentHTML('beforeend', newElmHtml)
        elm.replaceWith(newElm)
      })
    }  
  })
</script>

@kimegede
Copy link

kimegede commented Jan 8, 2024

@NGPixel possible to get this feature supported in the near future?

@grandixximo
Copy link

@8fm7 I'm glad you made it work, hopefully will help others as well. I still hope to see a native solution sooner or later...

@Thorvarium
Copy link

+1 here, would be very helpful to have a markdown way to put an uploaded video.

@TantanLight
Copy link

+1 here :}

@murcoder
Copy link

+1 please just add video embedding for visual editor! Not every content creator knows about coding.

@furynick
Copy link

+1 also need video to be rendered, a picture is worth 1000 words, a video is worth 1000 pictures.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@NGPixel NGPixel

Labels
contrib-medium Medium dev difficulty for contribution enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests