04. Settings for all player

All the setting for every package is set globally in the PrettyEmbedHelper package under the key Jonnitto.PrettyEmbed

We will go through each setting.

Debug output

Set this to true for debug output. This includes a console.log of all fired events and also a console.log of the props passed to the presentational components.

Jonnitto:
  PrettyEmbed:
    debug: true

This setting is disabled per default. If you enable it, it will still be disabled in Production context.

Disable the check if Alpine.js is installed

This package uses Alpine.js under the hood. It includes a small check, if the variable Alpine is available and if not, it will download it. If you also use Alpine.js, please make your instance globally available width window.Alpine = Alpine. To disable this check set includeAlpineJsCheck in your Settings.yaml to false:

Jonnitto:
  PrettyEmbed:
    includeAlpineJsCheck: false

Please make sure that the files from this package is loaded before your own file with Alpine.start()

Disable inclusion of the CSS and/or JS files

The Javascript and CSS files get loaded via Sitegeist.Slipstream:

If you want to load your own CSS, you can disable it like that:

Jonnitto:
  PrettyEmbed:
    includeAssets:
      css: false

If you want to load your own Javascript, you can disable it like that:

Jonnitto:
  PrettyEmbed:
    includeAssets:
      js: false

Image loading strategy

You can set here the Lazy loading strategy for the preview images

The settings can set to lazy, eager or null, defaults to lazy

Jonnitto:
  PrettyEmbed:
    loadImageStrategy: lazy

Image format

You can set here the format of the generated preview image. Supported are avif, jpg, jpeg, gif, png, wbmp, xbm, webp and bmp.

Jonnitto:
  PrettyEmbed:
    imageformat: webp

If you set the value to null, the default format from the file itself will be used

Currently avif is only supported by imagick > 7.0.10-25 and libheif > 1.7.0.

Wrapper

If this is set to a string, the element gets wrapped with a <div> and the class with the giving string.
If set to true, the element gets wrapped with a <div> without any class. If set to false, the element get not wrapped at all

Defaults to false

Jonnitto:
  PrettyEmbed:
    wrapper: mx-auto

Customize Buttons

If you want to customize buttons, you can set your own buttons. Be aware that it has to be markup based, as the content of the file gets included. If you want more options, you have to customize the Fusion prototype Jonnitto.PrettyEmbed:Presentation.Button.Play or Jonnitto.PrettyEmbed:Presentation.Button.Pause

Jonnitto:
  PrettyEmbed:
    button:
      play: 'resource://Jonnitto.PrettyEmbedHelper/Public/Assets/PlayButton.svg'
      pause: 'resource://Jonnitto.PrettyEmbedHelper/Public/Assets/PauseButton.svg'

Maximum width of images

This is the maximum width who is passed to the image for the poster and poster2x property. poster2x gets only enabled of the base image has enough pixel.

Jonnitto:
  PrettyEmbed:
    maximumWidth: 1920