README

Jonnitto.PrettyEmbedYoutube

此包的后续版本为：PrettyEmbedVideoPlatforms。它包括自动检测 Vimeo 或 YouTube 视频。要更新，请 按照以下说明操作。

在 Neos CMS 中为您的 YouTube 视频和播放列表提供更美观的嵌入方式 - 带有高清预览图片、灯箱功能和嵌入选项的高级自定义。

安装

大多数情况下，您需要对包进行一些小调整（例如，在 Settings.yaml 中的配置）。因此，将相应的包添加到您的主题包的 composer 中非常重要。这通常是位于 Packages/Sites/ 下的网站包。要正确安装，请转到您的主题包（例如 Packages/Sites/Foo.Bar）并运行以下命令

composer require jonnitto/prettyembedyoutube --no-update

--no-update 命令可防止依赖项自动更新。将包添加到您的主题 composer.json 后，返回 Neos 安装根目录并运行 composer update。搞定！现在您的包已正确安装。

常见问题解答

与 Jonnitto.Plyr 相比，PrettyEmbed 系列有何不同？

由于播放器仅在请求时加载，因此所有 PrettyEmbed 系列包都具有更好的前端性能优势。因此，除非用户想要观看视频，否则不会加载 iframe/video。

自定义

Settings.Jonnitto.yaml

JS API / 使用 youtube-nocookie.com

如果您想使用YouTube的JavaScript API（例如，用于跟踪），您必须将enableJsApi设置为true。

Jonnitto:
  PrettyEmbedYoutube:
    enableJsApi: true

或者，如果您想使用youtube-nocookie.com域名，您也可以像这样编辑Settings.yaml文件中的条目

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%'

请注意，您需要提供播放列表或视频的ID占位符（%id%）。

整个PrettyEmbed系列的全局设置

一些设置将从PrettyEmbedHelper包全局设置。这些是默认设置

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'

禁用CSS和/或JS文件的包含

JavaScript和CSS文件通过Sitegeist.Slipstream加载

如果您想加载自己的CSS，可以像这样禁用它

Jonnitto:
  PrettyEmbedHelper:
    includeAssets:
      css: false

如果您想加载自己的JavaScript，可以像这样禁用它

Jonnitto:
  PrettyEmbedHelper:
    includeAssets:
      js: false

如果您在构建管道中使用SCCS，您可以使用以下变量调整Main.scss的外观和感觉

// 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;

由于所有变量都有!default标志，如果您在导入Main.scss之前声明它们，变量不会被覆盖。这样，大多数常见的调整都可以轻松实现。

NodeTypes和Mixins

如果您想自定义默认设置，请查看Settings.Jonnitto.yaml文件。如果没有提供节点属性，将采用这些默认值。例如，如果您不希望编辑器选择视频是播放列表还是单个视频，可以在配置文件夹中禁用mixin，如下所示

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

以下是可用的mixin

如果您想在节点类型中包含YouTube视频，应至少使用mixin Jonnitto.PrettyEmbedYoutube:Mixin.VideoID。除了videoID属性外，此mixin还会添加从oembed服务获取的元数据的属性。此mixin也是从服务获取/更新数据所必需的。

Fusion

如果您想将播放器用作纯组件，可以使用 Jonnitto.PrettyEmbedYoutube:Component.Youtube 融合原型。

如果您想读取节点属性并让包为您处理所有这些，应该使用 Jonnitto.PrettyEmbedYoutube:Content.Youtube 原型。为了更方便地将其包含在节点类型中，您可以使用 contentElement = false 禁用内容元素包装。如果您想创建一个包含视频节点类型的文本，这将非常有用。

获取元数据

要获取元数据，可以运行以下流程命令 ./flow prettyembed:metadata。该命令搜索具有 VideoID 混合的节点，并尝试获取元数据。如果由于某些原因无法获取元数据（例如，视频设置为私有或ID不存在），您将获得一个包含节点类型名称、类型、视频ID和节点路径的表格。
任务有两个选项

• --workspace 工作区名称，默认为 'live'
• --remove 如果设置，将删除所有元数据

要获取cli中的选项概述，可以运行 ./flow help prettyembed:metadata

从旧版本更新

要从5或更早版本更新，必须在您的cli中运行以下命令
./flow node:migrate --version 20190619204500

要检查迁移的当前状态，可以运行
./flow node:migrationstatus

如果您要从4或更早版本更新，必须运行以下命令
./flow node:migrate --version 20181029203246

完成所有这些迁移后，您必须刷新前端缓存
./flow cache:flushone --identifier Neos_Fusion_Content