Video Picture-in-Picture

Imgix supports overlaying a secondary video clip directly onto the main video using the video-mark-* parameter family. Up to 2 simultaneous picture-in-picture layers are supported — the bare video-mark parameter is layer 0, and video-mark[1] adds a second layer.

Basic usage

Set video-mark to the URL-encoded source URL of the overlay video. Control its position and size with video-mark-x, video-mark-y, video-mark-w, and video-mark-h.

https://assets.imgix.net/main.mp4?fm=mp4
  &video-mark=https%3A%2F%2Fassets.imgix.net%2Foverlay.mp4
  &video-mark-w=320
  &video-mark-h=180
  &video-mark-align=bottom,right
  &video-mark-pad=20

Timing and transitions

Use video-mark-start and video-mark-end to control when the overlay is visible. video-mark-transition animates the entry of the overlay.

Multiple layers

To stack two overlays, use bare parameters (video-mark, video-mark-w, etc.) for the first layer and indexed parameters (video-mark[1], video-mark-w[1], etc.) for the second.

Use cases