Coordinates, sizing and layers
Zvid places visual elements on a pixel canvas. Output dimensions establish the coordinate space; each element then has a position, anchor and content size. Use the common-property reference for the exact supported fields by element type.
Dimensions and resolution
Use a resolution preset for a common output size, or use resolution: "custom" with explicit width and height. A preset can replace the dimensions you supply. When you override a template's width/height without choosing another preset, the submission pipeline switches the output resolution to custom.
Dimensions and coordinates are pixels. Changing the canvas size does not automatically redesign the typography or spacing of a composition. Inspect the resulting layout, especially when changing aspect ratio.
Position and anchor are different
| Field | Purpose |
|---|---|
position | A preset such as center-center, or custom for explicit coordinates |
x, y | The location used for custom placement |
anchor | Which point of the element sits at the location; also affects rotation/scaling origin |
width, height | Element box or media size, depending on element type |
A non-custom position preset computes the location and takes precedence over x/y and anchor. For an exact margin, select position: "custom" and supply coordinates and an explicit anchor. With anchor: "center-center", the coordinates name the element's center; with top-left, they name its top-left corner.
See the complete demonstrations in Position, Anchor, and Text and HTML.
Fit media into a box
containpreserves all the source content and can leave unused space.coverfills the destination area and can crop source edges.
These are the two accepted resize values; stretch is not a supported value. With explicit width and height, resizing fits the source into that element box. Without a box, it fits the source against the project canvas.
Use the accepted field values and paired examples in Resize. Crop parameters select source content; resizing determines how that content occupies the destination. Check the support matrix before applying image-specific properties to another element type.
Keep text readable
Set the text box size deliberately, especially for variable content. Use text fitting when labels vary in length, and validate the longest expected values. HTML lets a single text element own related text and its background, which helps keep alignment consistent.
When text sits over media, use sufficient contrast and a background/scrim where needed. Review the rendered example and layout warnings; structural validation does not prove that text is readable or fits inside a design.
Layer ordering
Use the element's track to express stacking and consult common properties for ordering behavior. Avoid depending on accidental ordering across separately rendered scene and global layers. In a scene-based video, project-level elements form the global overlay layer described in Scenes.
Diagnose a misplaced element
- Confirm the resolved canvas dimensions, including preset effects.
- Check whether a position preset is overriding your coordinates.
- Inspect the anchor and destination box dimensions.
- Check crop/resize behavior and the actual source aspect ratio.
- Check track ordering, scene membership and timing.
- Run validation, inspect layout warnings and review a rendered result.