Silverstripe 3: Override TinyMCE styles

Question

I want to add a Youtube video to my site, which I can do via the "Content" field, and then pressing the "Insert Media" button, which is based on TinyMCE. It then asks me for the video URL, details & dimensions, etc.

However, I want to add some styling to that video; for example, the "Play" button make it a different color and add some JS when pressing that button.

Is there any advice you can give me to achieve this? Thank you

score 1 · Accepted Answer · answered Oct 12 '20 at 04:40

I'll answer this question in 2 parts:

TinyMCE styles (probably not what you are looking for, but for the record)

You can add your own css file to tinyMCE that will be loaded inside the CMS. This is useful to make the Text in the CMS look similar to the frontend (eg Headline sizes).
The default file in 3.x is mysite/css/editor.css I think, but you can also overwrite that:
(Note that this editor.css file only applies inside the TinyMCE editor, not to your website, so it's only for the benefit of the content author/admin)

# 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);
    }
}

Styling YouTube Videos

YouTube these days embeds as an <iframe>, which means you don't really get any option to apply CSS to it. So styling in the traditional way that you are looking for is not possible.
But there are 4 things you could do that give you a little bit of control:

A) There are some limited options provided by google that you can add to the src of the <iframe> to change the style of the video. Eg if you add autoplay=1 and controls=0: <iframe src="https://www.youtube.com/watch?v=dQw4w9WgXcQ?autoplay=1&controls=0">
All availalbe parameters are documented here: https://developers.google.com/youtube/player_parameters

B) You could kind of fake it by not actually embedding the video, but instead add a thumbnail image in the CMS and add a play button over it and make that image a link to the video. Then when the user clicks on it, open the real YouTube player in a popup or a new tab

C) You could use the YouTube JavaScript API https://developers.google.com/youtube/iframe_api_reference. It allows you to send commands to the player like "Play" / "Pause". This way you could embed the video with controls=0, but then create your own controls that send commands to the player. Your own controls can be styled what ever way you want. Though be warned, this is probably quiet a lot of work to implement.

D) Like C) but easier, you could look if there is an existing software that uses the YouTube API to do that for you. A quick search returned https://plyr.io/ for example. Maybe it's worth looking into

(Also note, B) and C) are not easily integrated into TinyMCE, I've done both approaches, but I added extra CMS Fields for the Video (TextField named VideoURL and ImageField named VideoPreviewImage) and than displayed that in the frontend next to the text.

Silverstripe 3: Override TinyMCE styles

1 Answers1