WYSIWYG editor: "Insert media" not displaying embedded content in front-end

deekerman commented

2026-02-20 15:23:54 -05:00

Owner

Originally created by @carloposo on GitHub (Oct 24, 2019).

Originally assigned to: @NGPixel on GitHub.

Actual behavior

Embedded media (for example, a YouTube or Vimeo video) is correctly shown in WYSIWYG editor, but it is not in the final page (front-end).

Expected behavior

Embedded media is shown in the front-end.

Steps to reproduce the behavior

edit a page
click on "Insert media" icon in top bar
paste URL of video (for example https://vimeo.com/243244233)
see video preview in the page
click "Save" (top right of page)
click "Close" (top right of page)
the video is not present in the page

Originally created by @carloposo on GitHub (Oct 24, 2019). Originally assigned to: @NGPixel on GitHub. ### Actual behavior Embedded media (for example, a YouTube or Vimeo video) is correctly shown in WYSIWYG editor, but it is not in the final page (front-end). ### Expected behavior Embedded media is shown in the front-end. ### Steps to reproduce the behavior 1. edit a page 2. click on "Insert media" icon in top bar 3. paste URL of video (for example https://vimeo.com/243244233) 4. see video preview in the page 5. click "Save" (top right of page) 6. click "Close" (top right of page) 7. the video is not present in the page

deekerman added the

bug

enhancement

contrib-hard

labels

2026-02-20 15:23:54 -05:00

deekerman commented

2026-02-20 15:23:55 -05:00

Author

Owner

@anibal-aguila commented on GitHub (Feb 4, 2020):

same issue here

@anibal-aguila commented on GitHub (Feb 4, 2020): same issue here

deekerman commented

2026-02-20 15:23:55 -05:00

Author

Owner

@ideasandpixels commented on GitHub (Aug 19, 2020):

Same issue here. Looks like a very old issue -- any ideas?

@ideasandpixels commented on GitHub (Aug 19, 2020): Same issue here. Looks like a very old issue -- any ideas?

deekerman commented

2026-02-20 15:23:55 -05:00

Author

Owner

@nideKer commented on GitHub (Aug 22, 2020):

Same issue here. Is there any chance to fix it?

@nideKer commented on GitHub (Aug 22, 2020): Same issue here. Is there any chance to fix it?

deekerman commented

2026-02-20 15:23:55 -05:00

Author

Owner

@mrUlrik commented on GitHub (Oct 2, 2020):

I thought this was perhaps related to security settings such as embedding IFrame found in Admin > Security > Block IFrame Embedding or perhaps some kind of Cross-Site security issue. But after seeing no errors Console or Network I see that the rendered document simply doesn't include any information in the <figure> tag despite the fact that it shows at least a thumbnail of the content in the WYSIWYG editor.

The example below was created with a random Youtube video. The WYSIWYG editor displayed the video's thumbnail properly, but it's never rendered on the actual page.

<div>
	<p>Media Content Test, Media should appear below here</p>
	<div></div>
	<figure class="media"></figure>
	<div></div>
	<p>Media Content Test, Media should appear above here</p>
</div>

@mrUlrik commented on GitHub (Oct 2, 2020): I thought this was perhaps related to security settings such as embedding IFrame found in Admin > Security > Block IFrame Embedding or perhaps some kind of Cross-Site security issue. But after seeing no errors Console or Network I see that the rendered document simply doesn't include any information in the `<figure>` tag despite the fact that it shows at least a thumbnail of the content in the WYSIWYG editor. The example below was created with a random Youtube video. The WYSIWYG editor displayed the video's thumbnail properly, but it's never rendered on the actual page. ````html <div> <p>Media Content Test, Media should appear below here</p> <div></div> <figure class="media"></figure> <div></div> <p>Media Content Test, Media should appear above here</p> </div> ````

deekerman commented

2026-02-20 15:23:55 -05:00

Author

Owner

@mtrip commented on GitHub (Oct 2, 2020):

Same issue

@mtrip commented on GitHub (Oct 2, 2020): Same issue

deekerman commented

2026-02-20 15:23:55 -05:00

Author

Owner

@ryanmasuga commented on GitHub (Oct 9, 2020):

We just installed Wiki.js and the first thing I tried was embedding a YouTube video on a WYSIWYG page and I immediately ran into this. This has been open nearly a year at this point.

According to this other issue (https://github.com/Requarks/wiki/issues/1459), from Feb 2020 "Videos are not yet supported in the rendering pipeline." Maybe this issue should be closed if the most up-to-date discussion about it is over there.

@ryanmasuga commented on GitHub (Oct 9, 2020): We just installed Wiki.js and the first thing I tried was embedding a YouTube video on a WYSIWYG page and I immediately ran into this. This has been open nearly a year at this point. According to this other issue (https://github.com/Requarks/wiki/issues/1459), from Feb 2020 "Videos are not yet supported in the rendering pipeline." Maybe this issue should be closed if the most up-to-date discussion about it is over there.

deekerman commented

2026-02-20 15:23:55 -05:00

Author

Owner

@TheBigShort111 commented on GitHub (Feb 24, 2021):

Feb 24 2021 - Same issues here

@TheBigShort111 commented on GitHub (Feb 24, 2021): Feb 24 2021 - Same issues here

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@Jsmithrud37 commented on GitHub (Mar 7, 2021):

Running into this as well.

@Jsmithrud37 commented on GitHub (Mar 7, 2021): Running into this as well.

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@radialbalance commented on GitHub (Mar 9, 2021):

Same! I tried changing the Santize HTML & Rendering Security, but still no luck.

@radialbalance commented on GitHub (Mar 9, 2021): Same! I tried changing the Santize HTML & Rendering Security, but still no luck.

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@MaxWaldorf commented on GitHub (Jun 8, 2021):

Would like to see this feature fully implemented as well...

Cheers

@MaxWaldorf commented on GitHub (Jun 8, 2021): Would like to see this feature fully implemented as well... Cheers

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@grandixximo commented on GitHub (Jul 31, 2021):

Credits to @NGPixel @stukev and @BitWiseSE

for who did not follow the conversation over in the other bug report #1459

DISABLE rendering => HTML => security => Sanitize HTML

add this in your theme CSS Override

@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%;
    }
}

and this to your HTML injection

<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>

This will embed Youtube Vimeo and local mp4 in your WYSIWYG pages.
How it works:
It scans your page once after it's fully loaded, it finds the 'broken' tags, and mp4 links, and substitutes them with iframes and videos tags that display 640x360 embedded video if sanitize HTML is disabled. The CSS makes the videos fit on mobile screens, use at your own discretion.

@grandixximo commented on GitHub (Jul 31, 2021): Credits to @NGPixel @stukev and @BitWiseSE for who did not follow the conversation over in the other bug report #1459 DISABLE rendering => HTML => security => Sanitize HTML add this in your theme CSS Override ```css @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%; } } ``` and this to your HTML injection ```html <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> ``` This will embed Youtube Vimeo and local mp4 in your WYSIWYG pages. How it works: It scans your page once after it's fully loaded, it finds the 'broken' tags, and mp4 links, and substitutes them with iframes and videos tags that display 640x360 embedded video if sanitize HTML is disabled. The CSS makes the videos fit on mobile screens, use at your own discretion.

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@hardline7 commented on GitHub (Nov 27, 2024):

I can't believe this is still not resolved....

@hardline7 commented on GitHub (Nov 27, 2024): I can't believe this is still not resolved....

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@BPowell76 commented on GitHub (Nov 27, 2024):

I can't believe this is still not resolved....

The issue is more of a site settings issue then an application problem. By default, iframes are disabled. If you allow iframes, you can embed videos into a page.

@BPowell76 commented on GitHub (Nov 27, 2024): > I can't believe this is still not resolved.... The issue is more of a site settings issue then an application problem. By default, iframes are disabled. If you allow iframes, you can embed videos into a page.

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@TheTerrasque commented on GitHub (Dec 9, 2024):

The issue is more of a site settings issue then an application problem. By default, iframes are disabled. If you allow iframes, you can embed videos into a page.

How about letting me just put a html link to a youtube video? Because now it automatically get converted to an embedding, which doesn't work. I'm literally unable to add a youtube link via the visual editor. Not a video embedding, a link. Because it automatically gets converted to an embedding.

@TheTerrasque commented on GitHub (Dec 9, 2024): > The issue is more of a site settings issue then an application problem. By default, iframes are disabled. If you allow iframes, you can embed videos into a page. How about letting me just put a html link to a youtube video? Because now it automatically get converted to an embedding, which doesn't work. I'm literally unable to add a youtube link via the visual editor. Not a video embedding, a link. Because it *automatically* gets converted to an embedding.

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@BPowell76 commented on GitHub (Dec 10, 2024):

The issue is more of a site settings issue then an application problem. By default, iframes are disabled. If you allow iframes, you can embed videos into a page.

How about letting me just put a html link to a youtube video? Because now it automatically get converted to an embedding, which doesn't work. I'm literally unable to add a youtube link via the visual editor. Not a video embedding, a link. Because it automatically gets converted to an embedding.

I'm confused. Are you referring to just putting a link to a video on YouTube to watch it there or have the link be automatically converted to an embed on the page?

If you're copying something from YouTube one of the export/share options is to embed it. For example, I just need to paste this into any Markdown page with iframes enabled to Rick Roll people.

<iframe width="560" height="315" src="https://www.youtube.com/embed/XfELJU1mRMg?si=txNX11XuAU1W4cvK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Now that being said, make sure you have a blank line between the markdown and html tags for it to render properly.

@BPowell76 commented on GitHub (Dec 10, 2024): > > The issue is more of a site settings issue then an application problem. By default, iframes are disabled. If you allow iframes, you can embed videos into a page. > > How about letting me just put a html link to a youtube video? Because now it automatically get converted to an embedding, which doesn't work. I'm literally unable to add a youtube link via the visual editor. Not a video embedding, a link. Because it _automatically_ gets converted to an embedding. I'm confused. Are you referring to just putting a link to a video on YouTube to watch it there or have the link be automatically converted to an embed on the page? If you're copying something from YouTube one of the export/share options is to embed it. For example, I just need to paste this into any Markdown page with iframes enabled to Rick Roll people. ```html <iframe width="560" height="315" src="https://www.youtube.com/embed/XfELJU1mRMg?si=txNX11XuAU1W4cvK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> ``` Now that being said, make sure you have a blank line between the markdown and html tags for it to render properly.

deekerman commented

2026-02-20 15:23:56 -05:00

Author

Owner

@TheTerrasque commented on GitHub (Dec 10, 2024):

I'm confused. Are you referring to just putting a link to a video on YouTube to watch it there or have the link be automatically converted to an embed on the page?

Just putting a link.

Copy a link to a youtube video
Open page in Visual Editor
Paste link
Watch the link disappear and get replaced with an embedding
Save page
Page has no youtube link, nor youtube embedding. It's just blank where the link should be.

@TheTerrasque commented on GitHub (Dec 10, 2024): > I'm confused. Are you referring to just putting a link to a video on YouTube to watch it there or have the link be automatically converted to an embed on the page? Just putting a link. 1. Copy a link to a youtube video 2. Open page in Visual Editor 3. Paste link 4. Watch the link disappear and get replaced with an embedding 5. Save page 6. Page has no youtube link, nor youtube embedding. It's just blank where the link should be.

Rows
Columns

WYSIWYG editor: "Insert media" not displaying embedded content in front-end #802

Actual behavior

Expected behavior

Steps to reproduce the behavior