---
title: "Video to CKEditor"
video_id: 1y2TicPyWZc
url: https://www.youtube.com/watch?v=1y2TicPyWZc
workflow_page: https://workflows-of-ai.com/workflow/video-ckeditor
language: en
captions: generated
---

0:01 hi there Marcus here in today's video
0:03 I'm going to show you how to set up a
0:05 workflow where you can take a video
0:07 upload the video give a prompt how you
0:10 want to create a web page and then get a
0:12 web page from it so you can think of it
0:15 as
0:16 aiz uh you know someone telling an
0:19 editor that hey look at this video on
0:21 YouTube and please write an article
0:23 about it so this we're going to automize
0:25 now the video at question is uh Drupal
0:28 at the websummit 20 23 so it's from the
0:31 CEO of 1 x internet bu Sonia brider uh
0:35 where she exceptionally well talks about
0:38 druple and why you should use
0:42 Drupal um as usual this is op Source
0:46 it's free it's a module based on druple
0:49 that's why I chose the video so that
0:51 means after uh I am finish showing the
0:54 results here I will show you how to set
0:56 this up all the code is free you can
0:59 have it set up directly
1:01 afterwards so I'm just going to go ahead
1:03 now and click save and this HTML field
1:05 will then be filled out and it's going
1:07 to show a web page I will be uh uh clear
1:12 here that I have actually saved the
1:15 result from running this once so it
1:17 takes around 54 seconds uh to generate
1:21 uh a web page from this then 18 minute
1:25 long video just so you don't expect it
1:27 to go this fast I just didn't want to
1:29 have a award silence here uh and this is
1:32 what we have generated I'm just going to
1:34 click edit so we can go through the
1:35 prompt more exact here so first I'm
1:39 going to um talk about how uh it
1:44 actually can generate images so there's
1:46 cut out between four to six images make
1:48 sure that at least one image shows body
1:51 if you want to show PowerPoint slides
1:53 cut them out to only show the slide so
1:56 not only is it editorial not only does
1:58 it take screenshots of of the actual
2:01 video it can also crop those screenshots
2:04 so if we look at the results here it has
2:07 generated four Images one of those
2:10 images is of body it's not perfect I
2:13 just kept it here so you will see it's
2:15 not perfect they couldn't understand
2:17 that this is a PowerPoint slide probably
2:19 because of the white frame but in this
2:21 case and in this case uh I will just
2:24 show you in the video wherever these
2:26 passwords are so if we follow here you
2:28 can see this is never show full screen
2:31 so it has actually gone and cut out this
2:33 so it only shows it uh shows the slides
2:36 from the PowerPoint and same in this
2:38 case right it also added um image
2:41 captions so this it does automatically
2:44 if you don't prompt this prompt it
2:46 otherwise then right four parts starting
2:48 with a H2 header uh between two to four
2:51 paragraphs Ed you know you can use
2:53 strong in some other HTML so you can see
2:55 here there's four sections 1 two 3 four
2:58 with H2S
3:00 uh it's
3:01 using you know strong to emphasize
3:04 certain words open sustainable and
3:06 universally
3:08 accessible uh and this also comes then
3:10 from the prompt on how to write this so
3:13 write it as a coperate they want to sell
3:15 it to add agencies write a story about
3:18 how great truple is and how well she
3:19 explained it
3:21 right uh I also add context because in
3:24 this case I think she says her full name
3:26 but if she wouldn't I'm just writing
3:29 here the person on stages body Sonia
3:31 brider CEO of 1x Internet it's also
3:34 important so uh open AI or the a large
3:38 language modu model in this case can
3:40 connect B bad to the person on stage
3:43 because I say later make sure at least
3:45 one image show body uh and without
3:48 context it wouldn't actually connect
3:50 that though it would probably take the
3:52 assumption that it is the personal stage
3:54 uh also provide one selling quote from
3:57 body so there's a selling quote and it
4:00 even added it in uh quote or pre quote
4:02 here so Drupal is either the Pioneer in
4:05 CMS using these passwords or have
4:07 already integrated in within a weeks in
4:10 our project so if we just go to more
4:14 show
4:15 transcript and I'm going to search for
4:18 Pioneer is probably a good word it's
4:22 here but it's probably almost at the end
4:24 there so I just played this you're
4:26 seeing every single day and I'm going to
4:28 tell you something through is either the
4:30 Pioneer in CMS using these passwords and
4:34 integrating those technology
4:36 technologies that allow us to use this
4:38 either it's a Pioneer or we have already
4:41 integrated it within weeks into our
4:43 project and why is that so actually it
4:48 didn't quote her word by word but I
4:50 guess that's usually how a editor would
4:52 do as well you know create a readable
4:56 quote of um the gist of what she's
4:59 trying to say I guess you this is also a
5:02 prompting question you could ask it to
5:04 you know quote her word by word uh
5:07 lastly but not least I said that it
5:09 should of course give attribution this
5:11 doesn't change just because it's AI if
5:13 you if you actually you know write
5:15 article about someone else's work you
5:17 have to give attribution so please
5:20 attribute this uh video link and also if
5:23 possible organically linked to
5:25 drupal.org and here it actually
5:27 surprised me so by default when you
5:30 click on an image it links to a larger
5:32 version of this image but I think it did
5:36 the connection to that okay this is the
5:38 YouTube video so when you click here it
5:40 should go to the YouTube video so this
5:42 is what it did instead and if you don't
5:44 want this you have to you know further
5:46 create a better prompt and then in the
5:48 end it has naturally added there to the
5:50 be part of this groundbreaking yourne to
5:53 the call of action is clear Embrace drup
5:55 ball and this is then linking to
5:56 drupal.org
5:58 um
6:00 so that's it that's the results and um
6:03 now I'm going to go ahead and show you
6:05 how to set this up by yourself using
6:11 druple so before I start with uh
6:14 showcasing on how to set up this I just
6:16 want to uh show my website workflows of
6:20 AI so uh it's on workflows uh- off-
6:25 a.com you can see up here there you can
6:28 see all the different workflows that I
6:30 have done together with the module the
6:32 AI interpolator so the module AI
6:35 interpolator is open source it's free
6:37 all of the workflows you see here you
6:39 can basically do by yourself after you
6:42 have seen it it's a chaining tool for
6:44 automation of AI running in the content
6:47 management framework druple so the
6:50 advantage you can do here instead of you
6:52 know you can subscribe to the YouTube
6:54 channel if you're you know you want to
6:56 see new videos coming up but here you
6:58 can actually
7:00 uh uh filter on all the different uh
7:03 plugins that exist for the AI inator so
7:06 you can see uh specific videos that you
7:09 might be interested
7:11 right the a inator is uh since a week
7:15 fully documented that means that every
7:18 rule that you can run uh so a rule is
7:21 basically one part of the chain so you
7:24 can think of it like uh you know you
7:27 have something that scrapes a web page
7:29 and then you maybe have another uh to uh
7:32 another rule that uh categorizes that
7:35 web page so that's a simple chaining
7:37 rule so the rule we're going to use
7:39 today is open AI video to HTML so it's
7:42 very straightforward there's just one
7:44 rule um but if you want to know more
7:47 about it you know just Google the
7:49 interpolator
7:51 documentation I uh and there you can get
7:54 a list of all the rules I think we're up
7:56 to 60 65 rules now that you can do
7:59 on different field types and so on
8:02 um for today then we're going to use the
8:05 AI interpolator open AI module so that's
8:08 one of the plugins to the AI
8:09 interpolator that holds this Rule and
8:12 we're going to need the token mod module
8:15 in this case because we we want to
8:17 basically have Dynamic prompts so if you
8:20 you know in the Showcase I did this was
8:23 about a very specific video uh uh about
8:26 body talking about Drupal and of course
8:29 this prompt then become specific to this
8:32 video uh
8:35 so if you don't want a fully automatic
8:38 workflow where you have some generic way
8:41 of you know looking at videos where you
8:43 can have a generic prompt you need the
8:45 token module as well so we're just um
8:49 well I'm going to show you as well what
8:51 I have done is I'm running ddev in this
8:54 uh showcase but you know you can run
8:56 doxal lond whatever you want for local
8:58 development what's what important though
9:00 this will not work without FFM Peg and I
9:03 know this is a showstopper for people
9:04 that does manage hosting because they
9:06 will never install FFM but if you want
9:09 this to work there is no other way
9:11 around it because we're analyzing video
9:14 we're having FFM actually looking at the
9:16 video basically and also doing all the
9:19 uh different extractions from the video
9:21 and so on so if you're using ddv it's
9:24 just in the config there is this uh web
9:27 image extra packages you can just fmeg
9:30 restart DV and that's it the other thing
9:33 I just added here is by the time you see
9:36 this video it might not be true anymore
9:38 but right now if you look at the AI
9:40 interpolator it's in beta mode which
9:43 means that we have to set uh General
9:46 minimum stability to dep
9:50 basically so uh the thing we just need
9:54 to do now is we just need to basically
9:57 uh copy the composer command
10:00 uh and do
10:04 DD and the composer command and then
10:06 it's going to fetch this code so this is
10:09 a package manager for pH PHP for you who
10:12 don't work with PHP uh on the regular
10:16 and then we're just going to go ahead
10:17 and do the same with the token
10:21 module and oh right so what I just said
10:25 I have to prefix with
10:27 d all forgot myself so we prefix this
10:31 and you also see that it actually
10:32 downloads this oh by the way I have
10:34 installed admin toolbar beforehand
10:36 because otherwise it just becomes
10:38 unmanageable to use the website the next
10:41 step is just to log
10:44 in uh and enable this module so I just
10:49 click
10:51 extend uh and what I need
10:54 to uh extend then is the AI uh install
10:57 sorry uh AI inter open Ai and the token
11:01 modor are the two that we
11:04 need and this is going to install the
11:06 open AI module then and the open AI
11:09 module will um complain that we need to
11:12 add the open AI key so I'm just going to
11:14 go ahead and do that here this is to be
11:17 honest not how you should be doing it
11:19 putting it in uh completely like this
11:23 because that would be exported like
11:24 config you should rather put it in
11:25 settings.php but for all purposes when
11:28 you trying this locally this is good
11:30 enough so I'm just doing a HTML key here
11:34 temporarily temporary key that I will
11:37 remove after I've done this video so you
11:40 can't copy and use it and then you can
11:43 just click here or you can go to
11:44 configuration open AI settings paste it
11:47 in save and if you reload the error
11:50 message is gone and we have set up open
11:53 AI uh so the next step that we want to
11:58 do is to
11:59 uh do uh structure content type I'm just
12:02 going to create a new uh content type
12:05 here I call video to
12:07 HTML because I'm using content types and
12:10 that makes sense in this case we're
12:12 doing web pages uh there's a lot of
12:14 extra fields that comes with the CMS
12:16 part of druple right so I will just
12:18 disable this and remove some stuff that
12:21 I usually do so no menu save and we want
12:25 to add
12:26 Fields uh we can't use the normal body
12:29 field I haven't done a rule yet for the
12:31 text format long with summary so there
12:33 is only for text formatt long but the
12:35 first thing we want to add is the things
12:38 that we base this on and that's then
12:40 file upload
12:41 file and that's this is then the video
12:45 source so this is the video we upload
12:48 right we just take one and we say MP4s
12:51 are allowed but in in the you can do
12:54 anything that FFM Peg can handle which
12:55 is basically every video format in the
12:58 world so you can do whatever you want
13:00 there but we just set M4 in this case
13:03 create another field that is then a text
13:06 plane text plane long which is we call
13:10 the prompt to generate
13:14 HTML so that's the prompt we're going to
13:16 use to uh generate uh the HTML right uh
13:21 we just well sorry we should require
13:23 this of course and we should have
13:25 required the video source as well
13:26 because without if you don't f out these
13:29 two Fields nothing is going to happen
13:31 right and then in the end we want to
13:33 generate the HTML uh field right and
13:35 this is what is the actual website so
13:38 this is a text formatted long uh I'm
13:41 just going to call it uh full page HTML
13:45 in this case continue and this is where
13:48 the magic happens with AI interpolator
13:50 then uh so this is also just going to be
13:52 limited to one we're going to allow full
13:54 HTML because we want to allow a lot of
13:57 tags so if you don't know Drupal these
13:59 are basically filters for for what is
14:01 allowed so you can read more about text
14:03 formats Drupal if you don't know it
14:06 enable a an poor so this is where the
14:09 magic happens so here are all the rules
14:11 depending on what we have installed and
14:13 there is one then called open AI video
14:16 to
14:17 HTML we're going to enable this we're
14:20 going to run this in base mode there is
14:23 no other choice in this case and we have
14:25 to give a base field so this is
14:26 basically where is the video located
14:29 and that is in the field video source
14:32 and then we're going to add the
14:33 generating prompt but since we want it
14:35 dynamic in this case we don't want one
14:37 prompt that we run on every instance of
14:39 the video we upload we're going to use
14:41 the token module so we're just going to
14:44 paste the field that we created that was
14:46 prompt to generate HTML and this you can
14:48 just click as long as the text area is
14:51 focused and then it's added here so this
14:53 will basically replace that prompt with
14:56 whatever prompt we write right
14:59 then in advanced settings I would
15:02 suggest that you run this on the Q Chron
15:05 job because generating these videos can
15:07 take so long time and if if you either
15:10 have a net uh you know web server
15:13 Timeout on engine X or Apache or a PHP
15:16 timeout this might actually time out
15:18 before it's generated and you just get a
15:20 error so unless you can set a longer
15:22 time out I would set that you do this on
15:24 qron make sure that you have a Chron job
15:27 that runs uh well often every minute
15:30 would be the best and then it happens on
15:32 this crun job where it's allowed to take
15:34 long time and this this is a q worker by
15:37 the way so it's not going to stop the
15:38 Cron job just because it's running a
15:40 long time and you can also use the Dr Q
15:42 command to run this thing but in our
15:44 case I so I can visualize it well I'm
15:47 not actually going to run it now uh you
15:50 have already seen it by the time I have
15:52 run it right so uh in this case I will
15:56 just it direct there
15:59 uh I will just do some
16:03 uh fixing of the forms that we show off
16:07 because there's a lot of stuff that's
16:08 connected to druple CMS that I don't
16:11 just want to show you and then of course
16:13 on the display you don't actually want
16:15 to see the video you don't want to see
16:18 the prompt to generate HTML you just
16:20 want to see the HTML and we don't want a
16:23 label on it so it's shouldn't say full
16:25 page HTML over it and and we are done
16:31 it's not more complex than this so what
16:33 you can do now is go ahead and do a
16:35 video to HTML write a title write a
16:38 source write how to uh generate HTML
16:43 click save and
16:45 wait and that is uh talking about costs
16:49 by the way you can uh assume one to two
16:52 cents per minute of video so this uses a
16:56 pretty uh
16:59 budget saving way of doing this because
17:03 uh if you look into open AI you might
17:05 actually notice that video doesn't exist
17:08 as a multim multimodal context yet I'm
17:11 I'm guessing it's coming soon but it
17:13 doesn't exist so how this works in the
17:15 background for you who are
17:17 interested uh and this by the way I can
17:20 also mention this is open source the
17:22 code is there so if someone wants to
17:24 build a product around this feel
17:26 free uh be nice and give attri ution to
17:29 me but feel free to do it um I don't
17:32 have any commercial interest in this I
17:34 love open source so uh anyway how it
17:39 works is that it uh looks for scam Cuts
17:42 or key frames so uh yeah read up on
17:45 video if you want to know what that is
17:47 but basically it takes the most
17:48 important
17:49 Snippets uh out of the vide as images
17:52 put this in a grid of nine uh images per
17:55 image put time stamps on this
17:59 then it uses whisper API to uh get a
18:02 transcript of what's being said and when
18:04 it's being said and then you can connect
18:06 this via image to the audio and that way
18:11 create a prompt where you feed it the
18:13 images and the transcript and your
18:16 prompt and overlying prompt that's part
18:18 of the module if you look into the
18:20 source
18:21 code uh that gives back HTML and that's
18:24 how it works in the end basically so uh
18:28 it is fairly complex if you haven't
18:30 worked with AI before but you don't have
18:34 to set it up if you work with Drupal
18:36 just get the module and it does it for
18:38 you so thank you for watching and see
18:41 you soon if you like these videos and
18:43 please subscribe if you like the videos
18:45 that's what the YouTubers always says
18:47 thank
18:49 you
