How to Embed Videos in Photos ~ LA PENSINE MUTINE (EN)

In connection with the fall equinox, here's a graphic tutorial with a video clip filmed with my phone to set the mood. Five years ago (oops, time flies!), I explained how to embed an off-the-shelf animated GIF into a picture using Animation Shop and Paint Shop Pro. Since then, I have shifted to Linux and am progressively learning how to use the many features of GIMP 2.10, even though for such things as external plug-ins and masks, I'm still using Paint Shop Pro 8 which runs fine on Wine (except some cool filters that I can do without).

So for this tut, you will only need a recent version of GIMP for Windows, Mac or Linux.

Materials

a MP4, WebM, AVI, MPEG, FLV, MOV or 3GP video file not exceeding 100 MB in size
a picture with a transparent area to embed the video into (you'll want to avoid high resolutions as they might produce lower quality GIFs and increase loading time of your web page)

Instructions

1. Let's start by converting our video to an animated GIF. For that we shall use a free online tool that will do the job for us. You'll find it here:
https://ezgif.com/video-to-gif

2. Under Upload video file, click on the Browse button to select a video from your computer OR paste video URL if the video you wish to use is hosted online. Then click on the Upload video button.

Fig. 1

Fig. 2

3. Once your video has been uploaded, it should be displayed with a toolbar on top (fig. 1).

4. On this toolbar, select the Resize video tool to adjust its dimensions to the picture you wish to embed it in. Set your intended width in pixels in New width and New height empty for the algorithm to process it with the relevant ratio. Do not modify any other option then click on the Resize video button (fig. 2).

Fig. 3

Fig. 4

5. The resized video will be displayed on the same page below with a toolbar at the bottom (fig.3).

6. Click on the Crop video or ignore this step if you wish to keep it as it is and select another tool. You may choose a preset ratio (square, 4:3, 16:9, etc.) or draw the crop selection manually with your cursor as you do in any image editor. You may adjust your selection using the resize handles all around. Then click on the Crop video button (fig. 4).

Fig. 5

Fig. 6

7. The cropped video will be displayed on the same page below with a toolbar at the bottom (fig.5).

8. Click on the Cut video button to extract the sequence you wish to use in the video. Simply press the Play arrow of the player to watch the video. When it gets to the beginning of your desired sequence, click on the Use current position to indicate Start time and do the same for End time. If necessary, you may adjust these time marks manually afterwards for better accuracy. Then click on the Cut video button (fig. 6).

Fig. 7

Fig. 8

9. As always, the output video is displayed on the same page below Processed video with a toolbar. You may select other tools if you wish to change other settings such as speed, for instance.

10. Select the Video to GIF to convert the video. In the new window, adjust the framerate according to the length of your clip. A higher framerate will add more frames/pictures and a bigger GIF file. Then click on the Convert to GIF button (fig. 7).

11. The output GIF will be displayed on the same page below with its toolbar. Click on the Save button to save it to your computer (fig. 8).

12. Now run GIMP and load a copy of your animated GIF. In the layer window, you'll see all the frames of your animation displayed as layers from bottom to top. You may play the animation with Filters - Animation - Replay Animation menu. You may shorten the sequence by deleting a consecutive series of layers from the top and/or bottom but not randomly if you wish to keep a smooth animation.

13. In order to adjust colours, we need to increase their number with Image - RVB Mode menu.

14. Activate top layer. Then in another tab, load your desired image to embed the animation in. You may either copy-paste it as a new layer to the frame sequence or a quicker way is to click on its tab and drop it on the animation tab and the animation itself and it will automatically be pasted as a new layer.

15. If you have correctly adjusted the dimensions of your video on EzGif, your insert image should normally be larger and as a new layer will appear truncated. To fix that, use Image - Adjust Canvas to Layers menu. Afterwards, you may use the Scale tool or Layer - Scale and Resize Layer menu.

16. Use magic wand to select the transparent area of new layer then invert selection. Activate the layer below your insert image and press Delete key. Repeat operation for every layer. Unselect with Selection - None menu.

17. Move top layer (insert) just above Background layer. Right click and Merge Down (or use Layer - Merge Down menu).

18. Now you may export your picture. Use File - Export to... menu. Select desired location on your hard disk and filename. At the bottom of dialog box, click on Select File Type (By Extension) and choose GIF Image then click on the Export button. A new dialog box will open. Check both As Animation and Loop Forever options then click again on the Export button.

NOTE: I have performed additional manipulations which I haven't mentioned in order to keep this tutorial simple. As my insert frame also had some transparencies around, I added a new layer of the same colour as the pages of my blog and moved it to the bottom below the Background layer, merged down and renamed merged layer the same as original background layer for the animation to work. To match tones of the animation frames with insert picture, before merging down the latter on step 17, I used the Colours - Colour Balance menu and saved my settings before applying to active layer. Then I repeated the operation for EVERY layer EXCEPT insert picture layer using the CTRL+F keys (Repeat Last Filter).

Tada! I hope you enjoyed this tutorial. There are some additional tools for GIMP to manipulate videos, but I find they a bit too complicated for the moment and if I ever change my mind and find time to experiment, who knows I might write another tutorial.