Resizing and Cropping

Whether your web or mobile application provides carefully chosen photos created by your company, videos provided by your end users (UGC), or both, you probably need to edit the originals to meet the visual style of your website or mobile application.

These objectives can be accomplished programmatically and instantly with Front Space's dynamic URL transforms, eliminating the need for graphic designers and expensive editing software.

To resize and crop videos using Front Space, you can use the following URL patterns:

Resizing Videos

To resize a video, you can specify the desired width and height in pixels. Here's an example:

In the above example, w_500 specifies the width of the video as 500 pixels, and h_300 specifies the height as 300 pixels.

You can also specify the width and height as percentages of the original video size. For example:

In this case, w_0.5 specifies the width as 50% of the original video width, and h_0.5 specifies the height as 50% of the original video height.

API References: h (height) | w (width)

Cropping Videos

To crop a video, you can specify the desired width and height of the cropped area, along with the coordinates of the top-left corner of the area. Here's an example:

In the above example, w_500 specifies the width of the cropped area as 500 pixels, h_300 specifies the height as 300 pixels, x_100 specifies the x-coordinate of the top-left corner as 100 pixels, and y_200 specifies the y-coordinate of the top-left corner as 200 pixels.

You can also specify the cropping mode to control how the video is cropped. For example:

In this case, c_fill specifies that the video should be cropped to fill the specified width and height, while maintaining its aspect ratio.

See: Cropping Videos using Front.Space - API Reference

Other API References: c (fill) | c (resize) | h (height) | w (width) | x, y (x & y coordiates) | c (crop)

Gravity Parameter

The gravity parameter allows you to control the position of the video within the specified width and height. By default, the image is aligned to the center. However, you can use the gravity parameter to align the video to a different position.

To use the gravity parameter, you can specify one of the following values:

• north: Aligns the video to the top.
• south: Aligns the video to the bottom.
• east: Aligns the video to the right.
• west: Aligns the video to the left.
• center: Aligns the video to the center (default).

Here's an example URL that uses the gravity parameter to align the video to the top:

In this example, g_north specifies that the video should be aligned to the top.

See API References: g (gravity) | h (height) | w (width)

Blur Parameter

The blur parameter allows you to apply a blur effect to the video. You can specify the strength of the blur by setting the value of the blur parameter.

To use the blur parameter, you can specify a value between 0 and 2000. A higher value will result in a stronger blur effect.

Here's an example URL that applies a blur effect to the video:

In this example, e_blur:500 specifies that the video should be blurred with a strength of 500.

See: Blurring Videos using Front.Space - API Reference

See API References: g (gravity) | e (blurred) | c (resize) | h (height) | w (width)

Crop Modes

Front Space provides different crop modes that allow you to control how the Video is cropped when using the c_crop parameter. The following table lists the available crop modes:

To use a specific crop mode, you can set the value of the c parameter to the desired mode. For example:

In this example, c_crop,g_center specifies that the video should be cropped using the crop mode and aligned to the top-center.

See: Cropping Video using Front.Space - API Reference

Other API References: g (gravity) | c (crop) | c (fill) | h (height) | w (width) | c (pad) | c (limit) | c (scale)