--- title: "Tutorials: Video editing in TYPO3 - this is toujou." url: "https://www.toujou.com/service/tutorials/page-content/video-editing/" description: "Upload a video & generate a preview image. Find out how to edit the different way of playing a video such as Loop, Autoplay and Controls." date: 2020-08-14 modified: 2022-09-27 --- # Tutorials: Video editing in TYPO3 - this is toujou. 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Tutorials](https://www.toujou.de/service/tutorials/) 4. [Content editing](https://www.toujou.de/service/tutorials/page-content/) 5. [Video editing](https://www.toujou.de/service/tutorials/page-content/video-editing/) Video editing ============= In addition to images, you can also incorporate videos into your website. Once a video has been uploaded, you can generate a thumbnail for it and then choose between different display options such as autoplay, loop or controls [Manual](#c1008387) [Front end view](#c1008411) [Pieces of advice](#c1008396) --- Step by step -------------- [ ![](https://www.toujou.de/_assets/processed/9CQ4-bOI7jbInssYmGq6Zzd1z0vZCiQSVwXhxg_ljmU/q:85/c:2240:1258.4269662921:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0VOXzAxX1ZpZGVvX2hvY2hsYWRlbl9mMTMzZjI2NDgz:t/cb:5db6ff494f041979216ce37982b5011c84d24552/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzAxX1ZpZGVvX2hvY2hsYWRlbi5wbmc) ](https://www.toujou.de/_assets/processed/IqjRB-vNly4SzqVnV_gNONSr_lAEl80oZZPBeXVY6Vs/q:85/w:1024/h:576/fn:Y3NtX0VOXzAxX1ZpZGVvX2hvY2hsYWRlbl80MjhkM2NhOTIy:t/cb:5db6ff494f041979216ce37982b5011c84d24552/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzAxX1ZpZGVvX2hvY2hsYWRlbi5wbmc) ### How to incorporate a video - In toujou there are two different ways of uploading a video to the editor under *Media elements* by either embedding a video from an external source or as an internal media file**.** For both of the following instructions the content element will play a minor role as long as the video can be added to it. - If you decide you want to embed a video from an external source (which we highly recommended!), click **Add media by URL**. A new window will open automatically and you can enter the URL of the desired video into the input field. Currently, only YouTube and Vimeo are compatible sources. - If you decide you want to embed a video as a file, click on **Add media file**. If you haven't uploaded the video yet, you can add it easily by browsing through your storage and selecting the element. Then click **Upload** and select the desired media item in the corresponding folder. To ensure a properly functioning video make sure you do not exceed the maximum allowed file size. [ ![](https://www.toujou.de/_assets/processed/LN0NvAKwS2SZPJK5SrUIddUpGIShfKKNiPKpFt40HeI/q:85/c:1628:914.60674157303:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0VOXzAyX1ZpZGVvLU9wdGlvbmVuX2VlNWU0MTMyNmI:t/cb:597f3c2f7eebf478b72e2b5452dbf60e8709a097/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzAyX1ZpZGVvLU9wdGlvbmVuLnBuZw) ](https://www.toujou.de/_assets/processed/DXcDnhrDlEumTr-_Qw1mJ76imtyC4pmOdzQznsUrQBI/q:85/w:1024/h:576/fn:Y3NtX0VOXzAyX1ZpZGVvLU9wdGlvbmVuX2VmOTIzNjQ4NTM:t/cb:597f3c2f7eebf478b72e2b5452dbf60e8709a097/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzAyX1ZpZGVvLU9wdGlvbmVuLnBuZw) ### Playbach options for videos - In the *Video Metadata* editor you can choose your video playback options. You can reach the editor by clicking/expanding the media element already selected. - With **Autoplay** the video starts automatically. **Controls** activates the bar with the play button and sound options. **Loop** restarts the file automatically at the end. - Finally, **save** all changes. [ ![](https://www.toujou.de/_assets/processed/1BAArvqdVJwea1F8Oe0mCWYGW6wO6cq1nIvlb1mHu7g/q:85/c:2200:1235.9550561798:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX0VOXzAzX1Bvc3RlcmltYWdlX2RmNjUwMTU1MjI:t/cb:be5b27c6d59bd9749d0c994fcdfca7ac662dd6b4/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzAzX1Bvc3RlcmltYWdlLnBuZw) ](https://www.toujou.de/_assets/processed/PUhD--iBWfuKcqFKACaGRtAPxIq9TpdKZ8q-vnCjbN4/q:85/w:1024/h:576/fn:Y3NtX0VOXzAzX1Bvc3RlcmltYWdlXzRjZWFjMTVjNmQ:t/cb:be5b27c6d59bd9749d0c994fcdfca7ac662dd6b4/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzAzX1Bvc3RlcmltYWdlLnBuZw) ### Optional thumbnail for videos - You can create a thumbnail for videos with toujou. The thumbnail acts as a placeholder for the video before it is played or if you’re waiting for the [permission to show external content](https://www.toujou.de/service/toujou-set-up/data-protection-settings/). - To create a thumbnail, expand the media element by clicking the arrow located on the left. The editor *Video Metadata* will open automatically. Then click the **Add media file** button under *Poster Image* and select the desired file. You can either choose an existing file in the respective folder or select the corresponding image via **Select & upload file.** - A detailed explanation on the individual editing of image files is in the [tutorial for image editing in TYPO3](https://www.toujou.de/service/tutorials/page-content/image-editing/#c1004875). - Finally, **save** all changes. --- Front end view -------------- [ ![](https://www.toujou.de/_assets/processed/gaTi3ZdpI1NnsgoE57Lgzb5rPass6sb7fSC1_tiOLjk/q:85/w:433/h:244/fn:Y3NtX0VOXzA0LTAxX29obmUtUG9zdGVyaW1hZ2VfMWJmZDJjODg0Mg:t/cb:2697627e05aec9edb4d55693f0c69ffbf824581f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzA0LTAxX29obmUtUG9zdGVyaW1hZ2UucG5n) Video preview with no poster image. ](https://www.toujou.de/fileadmin/toujou/tutorials/06_page/Videos/EN/EN_04-01_ohne-Posterimage.png) [ ![](https://www.toujou.de/_assets/processed/7bK8KICAXjsD4JNNmMcgyKaY--4Dfk2AAy_9VzGItZM/q:85/w:433/h:244/fn:Y3NtX0VOXzA0LTAyX21pdC1Qb3N0ZXJpbWFnZV8zZWE5MmZjODBm:t/cb:47918d53ae5945efcc54eadaf793f45ed8b104b6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvVmlkZW9zL0VOL0VOXzA0LTAyX21pdC1Qb3N0ZXJpbWFnZS5wbmc) Video preview with poster image. ](https://www.toujou.de/fileadmin/toujou/tutorials/06_page/Videos/EN/EN_04-02_mit-Posterimage.png) --- Pieces of advice ---------------- toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website. It makes sense to have a closer look at the different play options of videos with toujou and whether it is beneficial to use a thumbnail. With a thumbnail, your site will be more user friendly and provide an image as a placeholder until the video is started. When creating the thumbnail via *Select & upload files* the video is saved in the User\_Upload folder. In contrast to *loop* and *controls*, the *autoplay* function for a video is not a preset. Before making changes also take into the consideration the parameters of your user's data volume. ##### Tutorials [Checklist ❯](https://www.toujou.de/service/#c1004820) [Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/) [File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/) [Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/) [Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/) [Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/) [Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/) [Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/) [Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/) [Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/) [Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/) ##### toujou set-up [Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/) [Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/) [Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/) [Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/) [Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/) [Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/) [Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/) [Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/) ##### toujou element library [Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/) [Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/) [Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/) [Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/) [Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/) [Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/) #### [Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/) [Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/) [Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/) [Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)