Skip to content
Television Simulator

Picture-in-Picture

Picture in Picture layout in action

Picture-in-Picture (pip) is a layout that displays a main content area with a smaller overlay window positioned anywhere on the screen. The main content fills the entire screen while the overlay content appears in a smaller window on top.

pip:
  a:
    image: placeholders/example-program.webp
  b:
    generator: test-pattern

This layout will display color bars as the main content with a YouTube video overlay positioned in the bottom-right corner.

Properties

Section titled “Properties”

a required

Section titled “a ”

Type: content engine

Description: The content to display as the main background that fills the entire screen. This can be any engine, including another layout.

b required

Section titled “b ”

Type: content engine

Description: The content to display in the picture-in-picture overlay window. This can be any engine, including another layout.

borderSize

Section titled “borderSize”

Type: number | string

Description: The border size around the picture-in-picture content. Can be specified in pixels (as a number) or any valid CSS size unit (as a string). The default value is 0.

borderColor

Section titled “borderColor”

Type: string

Description: The color of the border around the picture-in-picture content. Accepts any valid CSS color value. The default value is black.

width

Section titled “width”

Type: number | string

Description: The width of the picture-in-picture content. Can be specified in pixels (as a number) or any valid CSS size unit (as a string). If not specified, it defaults to 1/4 of the screen width.

height

Section titled “height”

Type: number | string

Description: The height of the picture-in-picture content. Can be specified in pixels (as a number) or any valid CSS size unit (as a string). If not specified, it defaults to 1/4 of the screen height.

top

Section titled “top”

Type: number | string

Description: Distance from the top edge of the screen to position the picture-in-picture content. Can be specified in pixels (as a number) or any valid CSS size unit (as a string). If none of the position options (top, left, right, bottom) are specified, the overlay defaults to bottom-right positioning.

left

Section titled “left”

Type: number | string

Description: Distance from the left edge of the screen to position the picture-in-picture content. Can be specified in pixels (as a number) or any valid CSS size unit (as a string). If none of the position options (top, left, right, bottom) are specified, the overlay defaults to bottom-right positioning.

Section titled “right”

Type: number | string

Description: Distance from the right edge of the screen to position the picture-in-picture content. Can be specified in pixels (as a number) or any valid CSS size unit (as a string). If none of the position options (top, left, right, bottom) are specified, the overlay defaults to bottom-right positioning.

bottom

Section titled “bottom”

Type: number | string

Description: Distance from the bottom edge of the screen to position the picture-in-picture content. Can be specified in pixels (as a number) or any valid CSS size unit (as a string). If none of the position options (top, left, right, bottom) are specified, the overlay defaults to bottom-right positioning.