youtube - Silverstripe 3:覆盖TinyMCE样式

Question

我想将Youtube视频添加到我的网站，可以通过“内容”字段，然后按基于TinyMCE的“插入媒体”按钮。然后，它要求我提供视频URL，详细信息和尺寸等。
但是，我想为该视频添加一些样式。例如，“播放”按钮使其具有不同的颜色，并在按下该按钮时添加一些JS。
您有什么建议可以给我实现吗？
谢谢

Answer 1

我将分两个部分回答这个问题:

TinyMCE样式(可能不是您想要的，而是为了记录)

您可以将自己的css文件添加到tinyMCE，该文件将在CMS内加载。这对于使CMS中的文本看起来类似于前端(例如标题大小)很有用。
我认为3.x中的默认文件是 mysite/css/editor.css，但您也可以覆盖该文件:
(请注意，此editor.css文件仅适用于TinyMCE编辑器内部，不适用于您的网站，因此仅出于内容作者/管理员的利益)

# mysite/_config/config.yml
LeftAndMain:
  extensions:
    - 'MyLeftAndMainExtension'

// mysite/code/MyLeftAndMainExtension.php
class MyLeftAndMainExtension extends \LeftAndMainExtension {
    public function init() {
        parent::init();
        $editorCss = '/mysite/css/some-other-css-file.css';
        // add a ?t=123456 timestamp to bust the cache
        $editorCss .= '?t=' . filemtime(\Director::getAbsFile($editorCss));
        \HtmlEditorConfig::get_active()->setOption('content_css', $editorCss);
    }
}

设置YouTube视频的样式

目前，YouTube嵌入为 <iframe>，这意味着您实际上没有任何将CSS应用于CSS的选择。因此无法以您想要的传统方式进行样式设计。
但是您可以通过以下4件事来控制自己:
A)Google提供了一些有限的选项，您可以将其添加到 src的 <iframe>中以更改视频的样式。例如，如果您添加自动播放= 1，控件= 0: <iframe src="https://www.youtube.com/watch?v=dQw4w9WgXcQ?autoplay=1&controls=0">此处记录了所有可用参数: https://developers.google.com/youtube/player_parameters
B)您可以通过不实际嵌入视频来伪造它，而是在CMS中添加缩略图图像，并在其上方添加播放按钮，然后将该图像链接到视频。然后，当用户单击它时，在弹出窗口或新标签页中打开真正的YouTube播放器
C)您可以使用YouTube JavaScript API https://developers.google.com/youtube/iframe_api_reference。它允许您将命令发送到播放器，如“播放” /“暂停”。这样，您可以将视频嵌入控件= 0，然后创建自己的控件以将命令发送到播放器。您可以按照自己的方式设置自己的控件样式。尽管被警告，但这可能是安静的许多工作要执行。
D)与C)类似，但更简单，您可以查看是否存在使用YouTube API的现有软件。例如，快速搜索返回了 https://plyr.io/。也许值得研究
(另请注意，B)和C)不容易集成到TinyMCE中，我已经完成了两种方法，但是我为视频添加了额外的CMS字段(名为VideoURL的TextField和名为VideoPreviewImage的ImageField)，然后在文本。