jonnitto/prettyembedvideo

Prettier embeds for your native videos in Neos CMS - with nice options like high-res preview images, lightbox feature, captions and advanced customization of embed options.

4.0.3 2022-11-22 16:52 UTC

This package is auto-updated.

Last update: 2023-09-22 18:37:26 UTC


README

Latest stable version Total downloads License GitHub forks Donate Paypal Wishlist amazon GitHub stars GitHub watchers GitHub followers Follow Jon on Twitter

Jonnitto.PrettyEmbedVideo

Prettier embeds for your native videos in Neos CMS - with excellent options like high-res preview images, lightbox feature, captions, and advanced customization of embed options.

Screenshot Screenshot with captions

Version Neos Maintained
1.* ^4.2.* + 5.*
2.* ^4.2.* + 5.*
3.* ^4.2.* + >= 5
4.* >= 5.3

Installation

Most of the time, you have to make small adjustments to a package (e.g., a configuration in Settings.yaml). Thus, it is essential to add the corresponding package to the composer from your theme package. Mostly this is the site package located under Packages/Sites/. To install it correctly, go to your theme package (e.g.Packages/Sites/Foo.Bar) and run the following command:

composer require jonnitto/prettyembedvideo --no-update

The --no-update command prevent the automatic update of the dependencies. After the package was added to your theme composer.json, go back to the Neos installation's root and run composer update. Et voilà! Your desired package is now installed correctly.

PrettyEmbedCollection

This package is member of the PrettyEmbedCollection which contains following packages:

If you install the PrettyEmbedCollection, the video players get grouped into an own group in the node-inspector; otherwise, they will be in the default group.

FAQ

What are the differences between the PrettyEmbed series to Jonnitto.Plyr?

PrettyEmbed series Plyr
YouTube Video
YouTube Playlist
Vimeo
Native Audio
Native Video
Advanced captions for native video
Preview image
Lightbox included
Preview image (for videos)
Javascript API
Filesize (JS & CSS) smaller bigger

All packages from the PrettyEmbed series benefit from a better frontend performance since the player gets only loaded on request. So, no iframe/video gets loaded until the user wants to watch a video.

Customization

Configuration

If you want to customize the default settings, take a look at the Settings.Jonnitto.yaml file. If no node property is giving, these default values will be taken. If you, for example, don't want to let the editor choose if the video should open in a lightbox, you can deactivate the mixin in your Configuration folder like this:

'Jonnitto.PrettyEmbedVideo:Content.Video':
  superTypes:
    'Jonnitto.PrettyEmbedHelper:Mixin.Lightbox': false

These are the available mixins used for the video:

Mixin name (Prefix: Jonnitto.PrettyEmbed) Description Default value Enabled per default
Helper:Mixin.Groups Enables the inspector groups
Video:Mixin.Sources Includes the properties for external and internal sources
Video:Collection.Track Include the possibility to set tracks to the video
Helper:Mixin.Image Add the preview image property
Helper:Mixin.Lightbox Open the video in a lightbox false
Helper:Mixin.Title Set the title to identify the video in the content tree easily, and pass the title as aria-label to the video.
Helper:Mixin.Loop Loop the video false
Helper:Mixin.Controls Show the controls true
Helper:Mixin.Autoplay Autoplays the video, false
Helper:Mixin.Muted Mutes the video false

If you want to use only internal or only external sources, you have to disable the supertype Jonnitto.PrettyEmbedVideo:Mixin.Sources and enable Jonnitto.PrettyEmbedVideo:Mixin.Assets (internal sources) or Jonnitto.PrettyEmbedVideo:Mixin.ExternalSources (external sources)

Jonnitto.PrettyEmbedVideo:Collection.Track adds the possability to add Jonnitto.PrettyEmbedVideo:Content.Track for subtitles, captions, descriptions, chapters or metadata.

Fusion

If you want to use the player as a pure component, you can use the Jonnitto.PrettyEmbedVideo:Component.Video fusion prototype.

If you want to read the node properties and let the package handle all for you, you should use the Jonnitto.PrettyEmbedVideo:Content.Video prototype. For easier including in your node types, you can disable the content element wrapping with contentElement = false. This is useful if you want to create, for example, a text with a video node type.