03. Alpine.js

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

Events and methods for the player

Stop or reset player

This functions are very useful if you want to stop a video when, for example, a user change a slide in an slider and you want to stop the playback.

There are two ways how to to this: Either with an custom event or with a magic function from Alpine.js

Target player

You can target which player should react, by passing an option to the function. If you don't pass any option, all player react to the command.

The option can be a different type of selector:

• A CSS-selector (e.g. '.any-css-selector')
• An element (e.g. document.body)
• Or a defined shortcut
  • 'Audio' to target all audio player
  • 'Video' to target all video player
  • 'YouTube' to target all YouTube player
  • 'Vimeo' to target all Vimeo player

The shortcuts are case-insensitive. You can call 'VIMEO', 'vImeO', or 'Vimeo', the result is the same.

You could also write '.jonnitto-prettyembed--vimeo' as the selector, it is the same as the shortcut 'Vimeo'

Magic function

They are three magic functions: $prettyembedPause, $prettyembedReset and $prettyembedPlay.

Examples:

• Pause / Reset all player $prettyembedPause / $prettyembedReset
• Pause / Reset all videos in area with CSS-selector: $prettyembedPause('.first,.second') / $prettyembedReset('.first,.second')
• Pause / Reset all Vimeo player $prettyembedPause('Vimeo') / $prettyembedReset('Vimeo')
• Play first Player found $prettyembedPlay
• Play first Audio Player found $prettyembedPlay('Audio')

A markup for a button could look like this:

<button type="button" x-on:click="$prettyembedPause('YouTube')">Pause all YouTube videos</button>

Events

They are three evenst: prettyembedPause, prettyembedResetandprettyembedPlay`.

Examples:

Stop all <video>

window.dispatchEvent(new CustomEvent('prettyembedPause', {detail: 'Video'}))

or, in Alpine.js context, you could also use $dispatch function:

$dispatch('prettyembedPause', 'Video');

More examples:

// In a Alpine.js component (But you can also use the magic directly)
$dispatch('prettyembedReset');
$dispatch('prettyembedPause', 'Video');
$dispatch('prettyembedReset', document.body);
$dispatch('prettyembedPause', '.any-css-selector');
$dispatch('prettyembedPlay', '.any-css-selector > .nesting');

// From anywhere
window.dispatchEvent(new CustomEvent('prettyembedReset'))
window.dispatchEvent(new CustomEvent('prettyembedPause', {detail: 'Video'}))
window.dispatchEvent(new CustomEvent('prettyembedReset', {detail: document.body}))
window.dispatchEvent(new CustomEvent('prettyembedPause', {detail: '.any-css-selector'}))
window.dispatchEvent(new CustomEvent('prettyembedPlay', {detail: '.any-css-selector > .nesting'}))

Events

On every play, pause or finished an event with the name prettyembed will be fired with some details. These events are not fired on video with autoplay when the user didn't made any interaction

document.addEventListener("prettyembed", (event) => {
  console.log(event.detail);
});

You can also enable the debug to test this:

Jonnitto:
  PrettyEmbed:
    debug: true