How to embed a video into a record such as knowledge base article?

[Russ]

[searched whole forum, can't find a solution]

Hey guys, simple task that I can't resolve yet, add vimeo/youtube videos to a knowledge base article.
I tried by adding WYSIWYG field with, w/out iframe enabled, I just can't embed the video

It's a simple knowledge base article, but I need a video from a YouTube to be embedded above the article's text, not an attachment.
Not a dashlet. Could be a side element, but belonging to the record.

Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Thanks

[shalmaxb]

This should work with the HTML Video Tag:

<video controls="" height="240" width="320">
<source type="video/mp4" src="path/to your/video">
<source type="video/ogg" src="movie.ogg">
Your browser does not support the video tag.
</video>

Maybe you will have to upload the video first (e.g. in the documents), grab the ID and put that into the path as well. I did not test this, but should work.

[Russ]

Thank you so much, but is there a way embed a youtube video? Since youtube has all the company videos already..

[shalmaxb]

normally that should work with an iFrame, but obviously the editor strips everything like an iFrame. I did not find how to prevent that.
One workaround could be, that you put instead an image (screenshot) of your video and link that to the youtube video.

[Russ]

Thanks shalmaxb!
No other options?

[shalmaxb]

unfortunately not

[migrator]

Thanks shalmaxb // very helpful. Seems like something we can easily add to the WYSIWYG editor, like for <img />

[esforim]

Careful mirgrator! Yuri hate the word "easily".

Let me quote it from memory, "once we add it we have to support it forever". Hence he reluctant to add certain thing until he can predict the future.

[migrator]

esforim looks like this is mainly/only an adjustment to the SummerNote implementation:

https://summernote.org/deep-dive/#insertion-api

Perhaps only with a bit of modification to not depend on third-party providers like YouTube to allow self-hosted videos:

[esforim]

Perhaps you can do a Pull Request for it.

But considering the "feature-freeze" notification on the forum (and Git) it might be a long wait for it to get review.

I been here 2 years(?). First time I see this type of announcement.

[shalmaxb]

Meanwhile I tested like coded in thread 2. You can use the plain HTML embed code, upload your video to the documents for instance, copy the link from the documents and put it in at source in the code. Works as expected without manipulating anything in the editor or using iFrame.

Here a version of the code with video thumbnail:

<p style="text-align: center;"><video width="320" height="240" controls="" poster="/path to thumbnail file">
<source src="/path to video file" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video></p>​

Of course you have to upload the video thumbnail first. I don`t know, if the ogg file is still necessary (it was before because of Firefox browser, which could not display mp4-file). Maybe some browsers still need an ogg-file. Then you would have to uplaoad a converted video-file as well.

[czcpf]

One potential point of concern, if you use CRM to send an email from the knowledge base article, the video won't play from within email body. To solve that, add a link to open the video directly.

<p style="text-align: center;"><video style="object-fit: cover;" controls="" width="100%">
<source type="video/mp4" src="path_to_mp4">
Your device does not support embedded video. Please use the link below.
</video>
</p>
<p>
Having trouble playing? <a rel="noopener noreferrer" href="path_to_mp4" target="_blank"> Watch Video Here</a>
</p>​