PHPackages                             jonnitto/prettyembedyoutube - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. jonnitto/prettyembedyoutube

Abandoned → [jonnitto/prettyembedvideoplatforms](/?search=jonnitto%2Fprettyembedvideoplatforms)Neos-plugin[Image & Media](/categories/media)

jonnitto/prettyembedyoutube
===========================

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

8.1.0(3y ago)1088.6k↓33.9%7[1 issues](https://github.com/jonnitto/Jonnitto.PrettyEmbedYoutube/issues)2GPL-3.0-or-later

Since Apr 28Pushed 3y ago3 watchersCompare

[ Source](https://github.com/jonnitto/Jonnitto.PrettyEmbedYoutube)[ Packagist](https://packagist.org/packages/jonnitto/prettyembedyoutube)[ Docs](https://github.com/jonnitto/Jonnitto.PrettyEmbedYoutube)[ Fund](https://www.paypal.me/Jonnitto/20eur)[ GitHub Sponsors](https://github.com/jonnitto)[ RSS](/packages/jonnitto-prettyembedyoutube/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (64)Used By (2)

[![Latest stable version](https://camo.githubusercontent.com/3962c6b1ed480d2881d6df3fde229b8b4b9eedbdd25ef7892cc9d0a07e280d96/68747470733a2f2f706f7365722e707567782e6f72672f6a6f6e6e6974746f2f707265747479656d626564796f75747562652f762f737461626c65)](https://packagist.org/packages/jonnitto/prettyembedyoutube) [![Total downloads](https://camo.githubusercontent.com/1d3a278bb94495379199a40fb3ef83ce479f8e288a5d2778359a8e74eabf3ba0/68747470733a2f2f706f7365722e707567782e6f72672f6a6f6e6e6974746f2f707265747479656d626564796f75747562652f646f776e6c6f616473)](https://packagist.org/packages/jonnitto/prettyembedyoutube) [![License](https://camo.githubusercontent.com/2e11520a4ce5b86c980cd7246cc99b7bb5daf99dc7f4e8bd7ae90d35dcf53fe7/68747470733a2f2f706f7365722e707567782e6f72672f6a6f6e6e6974746f2f707265747479656d626564796f75747562652f6c6963656e7365)](https://packagist.org/packages/jonnitto/prettyembedyoutube) [![GitHub forks](https://camo.githubusercontent.com/3f0ae04518f2b5dae26a01139d9d92894cea27a01316f00a50a25c2069b95c32/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f6a6f6e6e6974746f2f4a6f6e6e6974746f2e507265747479456d626564596f75747562652e7376673f7374796c653d736f6369616c266c6162656c3d466f726b)](https://github.com/jonnitto/Jonnitto.PrettyEmbedYoutube/fork) [![Donate Paypal](https://camo.githubusercontent.com/1227272f32784038895c3262c0a5e7d5a65513d7237ec1f43993a6c8885eff22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d50617950616c2d79656c6c6f772e737667)](https://www.paypal.me/Jonnitto/20eur) [![Wishlist amazon](https://camo.githubusercontent.com/25c7ebb16a2d458e06b90a546c1d98e77cf33f27c42006a4b6f8357e21f334ce/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f576973686c6973742d416d617a6f6e2d79656c6c6f772e737667)](https://www.amazon.de/hz/wishlist/ls/2WPGORAVYF39B?&sort=default) [![GitHub stars](https://camo.githubusercontent.com/337edaf5169c6b8af5b9ccfd98169ba11fde6b7ccf06afc42bffa292f154edb3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6a6f6e6e6974746f2f4a6f6e6e6974746f2e507265747479456d626564596f75747562652e7376673f7374796c653d736f6369616c266c6162656c3d5374617273)](https://github.com/jonnitto/Jonnitto.PrettyEmbedYoutube/stargazers) [![GitHub watchers](https://camo.githubusercontent.com/ed20a3210b4e0d7cf36fcc9a2d66084cde3355dd4dfddc4f2af601e09b8d6ace/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f77617463686572732f6a6f6e6e6974746f2f4a6f6e6e6974746f2e507265747479456d626564596f75747562652e7376673f7374796c653d736f6369616c266c6162656c3d5761746368)](https://github.com/jonnitto/Jonnitto.PrettyEmbedYoutube/subscription) [![GitHub followers](https://camo.githubusercontent.com/d6a5c27d7c6c05ecc3a033972dd1c1d6e88610dc4495d29b74681b0dfe391eb5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f6c6c6f776572732f6a6f6e6e6974746f2e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77)](https://github.com/jonnitto/followers) [![Follow Jon on Twitter](https://camo.githubusercontent.com/a5d40acbfdb781560e282476df7895f40f8b10783e6b1b9058900bd601d5d2a8/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f6a6f6e6e6974746f2e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77)](https://twitter.com/jonnitto)

Jonnitto.PrettyEmbedYoutube
===========================

[](#jonnittoprettyembedyoutube)

> There is a successor of this package: [PrettyEmbedVideoPlatforms](https://github.com/jonnitto/Jonnitto.PrettyEmbedVideoPlatforms)It includes automatic detection of Vimeo or YouTube videos. To update, [follow these instructions](https://github.com/jonnitto/Jonnitto.PrettyEmbedVideoPlatforms#merge-prettyembedyoutube-and-prettyembedvimeo).

Prettier embeds for your YouTube videos and playlists in [Neos CMS](https://www.neos.ioe) - with helpful options like high-res preview images, lightbox feature, and advanced customization of embed options.

[![Screenshot](https://user-images.githubusercontent.com/4510166/76709350-6fb3c480-66fe-11ea-853f-630499f626a2.png)](https://user-images.githubusercontent.com/4510166/76709350-6fb3c480-66fe-11ea-853f-630499f626a2.png)

VersionNeosMaintained2.\*2.\*> 4.1.\*3.\* + 4.\*5.\*3.3.\* + 4.\*6.\*^4.2.\* + 5.\*7.\*^4.2.\* + >= 5✓8.\*>= 5.3✓Installation
------------

[](#installation)

Most of the time, you have to make small adjustments to a package (e.g., configuration in `Settings.yaml`). Because of that, 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 following command:

```
composer require jonnitto/prettyembedyoutube --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 root of the Neos installation and run `composer update`. Et voilà! Your desired package is now installed correctly.

FAQ
---

[](#faq)

**What are the differences from the PrettyEmbed series to [Jonnitto.Plyr](https://github.com/jonnitto/Jonnitto.Plyr)?**

PrettyEmbed seriesPlyrYouTube 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)smallerbiggerAll packages from the PrettyEmbed series have the benefit of 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
-------------

[](#customization)

### [Settings.Jonnitto.yaml](Configuration/Settings.Jonnitto.yaml)

[](#settingsjonnittoyaml)

#### JS API / Usage of youtube-nocookie.com

[](#js-api--usage-of-youtube-nocookiecom)

If you want to use the JavaScript API from youtube (e.g., for tracking), you have to enable set `enableJsApi` to `true`.

```
Jonnitto:
  PrettyEmbedYoutube:
    enableJsApi: true
```

or, if you want to use the youtube-nocookie.com domain you can also edit the entries in your `Settings.yaml` file like this:

```
Jonnitto:
  PrettyEmbedYoutube:
    url:
      playlist:
        embed: 'https://www.youtube-nocookie.com/embed/videoseries?list=%id%'
        href: 'https://www.youtube-nocookie.com/playlist?list=%id%'
      video:
        embed: 'https://www.youtube-nocookie.com/embed/%id%'
        href: 'https://www.youtube-nocookie.com/watch?v=%id%'
```

Be aware that you need to provide the placeholder for the ID (`%id%`) of the playlist or video.

#### Global settings for the whole PrettyEmbed series

[](#global-settings-for-the-whole-prettyembed-series)

Some settings will be set globally from the [PrettyEmbedHelper](https://github.com/jonnitto/Jonnitto.PrettyEmbedHelper) package. These are the default settings:

```
Jonnitto:
  PrettyEmbedHelper:
    # If you want to use your own assets, set this to false (Backend.js and Backend.css will be always be included in the backend)
    includeAssets:
      css: true
      js: true

    # If you want to save the duration of YouTube videos and playlists into the
    # property metadataDuration you have to add a API key from YouTube Data API v3
    # You can create this key on https://console.cloud.google.com/
    youtubeApiKey: null

    # For Vimeo and Youtube you can enable here the option the show a confirm dialog
    # that external content get loaded and the user may be tracked
    enableGdprMessage: false

    # This is the maximum width of a custom preview image
    maximumWidth: 1920

    # 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
    wrapper: 'jonnitto-prettyembed-wrapper'

    # The buttons which get injected (file content) to the player.
    button:
      play: 'resource://Jonnitto.PrettyEmbedHelper/Public/Assets/PlayButton.svg'
      pause: 'resource://Jonnitto.PrettyEmbedHelper/Public/Assets/PauseButton.svg'
```

#### Disable inclusion of the CSS and/or JS files

[](#disable-inclusion-of-the-css-andor-js-files)

The Javascript and CSS files get loaded via [Sitegeist.Slipstream](https://github.com/sitegeist/Sitegeist.Slipstream):

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

```
Jonnitto:
  PrettyEmbedHelper:
    includeAssets:
      css: false
```

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

```
Jonnitto:
  PrettyEmbedHelper:
    includeAssets:
      js: false
```

If you use SCCS in your build pipeline, you can adjust the look and feel of [`Main.scss`](https://github.com/jonnitto/Jonnitto.PrettyEmbedHelper/blob/master/Resources/Private/Assets/Main.scss) with following variables:

```
// Buttons (play / pause)
$prettyembed-button-play-size: 72px !default;
$prettyembed-button-pause-size: round(
  $prettyembed-button-play-size / 2
) !default;
$prettyembed-button-pause-margin: round(
  $prettyembed-button-pause-size / 2
) !default;
$prettyembed-button-opacity: 0.9 !default;
$prettyembed-button-scale: 0.8 !default;
$prettyembed-button-scale-hover: 1 !default;
$prettyembed-button-scale-active: 0.9 !default;
$prettyembed-button-foreground-color: #fff !default;
$prettyembed-button-background-color: #000 !default;
$prettyembed-button-background-opactiy: 0.4 !default;

// Lightbox
$prettyembed-lightbox-include: true !default;
$prettyembed-lightbox-overlay-color: #0b0b0b !default;
$prettyembed-lightbox-overlay-opacity: 0.8 !default;
$prettyembed-lightbox-padding: 15px !default;
$prettyembed-lightbox-max-width: 900px !default;
$prettyembed-lightbox-shadow: 0 0 8px rgba(#000, 0.6) !default;
$prettyembed-lightbox-z-index: 5500 !default;
$prettyembed-lightbox-close-size: 30px !default;
$prettyembed-lightbox-close-opacity: 0.65 !default;
$prettyembed-lightbox-close-opacity-hover: 1 !default;
$prettyembed-lightbox-close-color: #fff !default;
```

Because all variables have the `!default` flag, the variables don't get overwritten if you declare them before you import [`Main.scss`](https://github.com/jonnitto/Jonnitto.PrettyEmbedHelper/blob/master/Resources/Private/Assets/Main.scss). Like that, most of the frequent adjustments can be easily achieved.

### NodeTypes and Mixins

[](#nodetypes-and-mixins)

If you want to customize the default settings, take a look at the [Settings.Jonnitto.yaml](Configuration/Settings.Jonnitto.yaml) file. If no node property is given, these default values will be taken. If you, for example, don't want to let the editor choose if the video is a playlist or just a video you can deactivate the mixin in your Configuration folder like this:

```
'Jonnitto.PrettyEmbedYoutube:Content.Youtube':
  superTypes:
    'Jonnitto.PrettyEmbedYoutube:Mixin.Type': false
```

These are the available mixins:

Mixin name (Prefix: `Jonnitto.PrettyEmbed`)DescriptionDefault valueEnabled per default`Helper:Mixin.Groups`Enables the inspector groups✓`Helper:Mixin.Image`Add the preview image property✓`Helper:Mixin.Lightbox`Open the video in a lightbox`false`✓`Helper:Mixin.PreserveAspectRatio`If the lightbox is active, the preview image can preserve his aspect ratio.`true`✓`Helper:Mixin.BackendLabel`Read the title of the video and set this as label in the content tree✓`Youtube:Mixin.Type`Choose between `playlist` and `video``video`✓`Youtube:Mixin.VideoID`Let the user enter the video id or youtube url✓`Helper:Mixin.AllowFullScreen`Allow fullscreen or not`true``Helper:Mixin.Loop`Loop the video`false``Helper:Mixin.Controls`Show the controls`true``Youtube:Mixin.ClosedCaptions`Show captions`false``Youtube:Mixin.ShowRelated`Show related videos at the end`false`If you want to include the youtube video in your node type, you should use at least the mixin `Jonnitto.PrettyEmbedYoutube:Mixin.VideoID`. This add besides the `videoID` property also the properties for the metadata fetched from the oembed service. This mixin is also necessary to fetch/update the data from the service.

### Fusion

[](#fusion)

If you want to use the player as a pure component, you can use the [`Jonnitto.PrettyEmbedYoutube:Component.Youtube`](Resources/Private/Fusion/Component/Youtube.fusion) fusion prototype.

If you want to read the node properties and let the package handle all for you, you should use the [`Jonnitto.PrettyEmbedYoutube:Content.Youtube`](Resources/Private/Fusion/Content/Youtube.fusion) prototype. For more comfortable 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.

Get metadata
------------

[](#get-metadata)

To get the metadata, you can run the flow command `./flow prettyembed:metadata`. This command search for nodes with the `VideoID` mixin, and tries to get the metadata. If for some reason, it is not possible to fetch the metadata (Perhaps the video is set to private, or the ID does not exist), you will get a table with the name of the node type, the type, the video ID and the node path.
The task comes with two options:

- `--workspace` Workspace name, default is 'live'
- `--remove` Is set, all metadata will be removed

To get an overview of the options in the cli, you can run `./flow help prettyembed:metadata`

Update from older versions
--------------------------

[](#update-from-older-versions)

To update from version 5 or older, you have to run following command in your cli:
`./flow node:migrate --version 20190619204500`

To check the current state of the migrations, you can run
`./flow node:migrationstatus`

If you want to update from version 4 or older, you have to run following command:
`./flow node:migrate --version 20181029203246`

After all those migrations you have to flush your frontend cache:
`./flow cache:flushone --identifier Neos_Fusion_Content`

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance18

Infrequent updates — may be unmaintained

Popularity38

Limited adoption so far

Community20

Small or concentrated contributor base

Maturity77

Established project with proven stability

 Bus Factor1

Top contributor holds 98.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~46 days

Recently: every ~141 days

Total

63

Last Release

1160d ago

Major Versions

4.2.1 → 5.0.02018-10-30

4.2.2 → 5.2.12019-05-03

5.2.3 → 6.0.02019-06-19

6.3.0 → 7.0.02020-03-15

7.3.0 → 8.0.02022-03-22

### Community

Maintainers

![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto)

---

Top Contributors

[![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (246 commits)")[![ComiR](https://avatars.githubusercontent.com/u/11410095?v=4)](https://github.com/ComiR "ComiR (1 commits)")[![dlubitz](https://avatars.githubusercontent.com/u/13046100?v=4)](https://github.com/dlubitz "dlubitz (1 commits)")[![gerhard-boden](https://avatars.githubusercontent.com/u/10533739?v=4)](https://github.com/gerhard-boden "gerhard-boden (1 commits)")

---

Tags

hacktoberfestneoscmsnodetypevideoyoutubevideoyoutubeflowNeoscontentelement

### Embed Badge

![Health badge](/badges/jonnitto-prettyembedyoutube/health.svg)

```
[![Health](https://phpackages.com/badges/jonnitto-prettyembedyoutube/health.svg)](https://phpackages.com/packages/jonnitto-prettyembedyoutube)
```

###  Alternatives

[jonnitto/plyr

Plyr.io for Neos.io

1236.2k2](/packages/jonnitto-plyr)[chojnicki/video-platforms-parser

Easy to use SDK with grabber for multiple platforms at once like YouTube, Dailymotion, Facebook and more.

22226.4k](/packages/chojnicki-video-platforms-parser)[moc/imageoptimizer

Flow package that optimizes generated thumbnail images (jpg, png, gif, svg) for web presentation.

31106.8k](/packages/moc-imageoptimizer)[mediamonks/sonata-media-bundle

A powerful, flexible and easy to use alternative for the existing Sonata Media Bundle

109.8k](/packages/mediamonks-sonata-media-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)