Typo3 CKeditor YouTube video issue

Question

I tried to add an YouTube video in my text/image content with the iframe link from YouTube, or by clicking in "Embed Youtube video" and adding the embed code but it doesn't work, in frond en I see an Iframe balise like :

<--iframe width="560" height="315" src="https://www.youtube.com/embed/dqsdsdq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

In Ckeditor I see a black square of YouTube written : video not available

I checked my config but I don't see what is wrong, I show you some code of my config :

Default.yaml

editor:
  config:
    allowedContent: true
    removeFormatAttributes: ""
    youtube_width: 550
    extraAllowedContent: '*(*)[data-*]; iframe'


   externalPlugins:
    youtube: {resource: "EXT:skin/Resources/Public/vendor/scripts/youtube/youtube/plugin.js"}

    extraAllowedContent:
      - span
      - iframe
    allowTags:
      - iframe
  processing:
    allowTags:
      - iframe
    allowTagsOutside:
      - iframe

Page.ts :

RTE.default {
    proc {
        blockElementList := addToList(iframe)
        externalBlocks := addToList(iframe)
    }
}

PageTemplate.ts

lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)
lib.parseFunc.htmlSanitize = 0
lib.parseFunc_RTE.htmlSanitize = 0

Someone can tell we what's wrong with my config ? I'm using TYPO3 9.5

thanks you

update : It's working now, I added the 2 last line in my PageTemplate.ts , I edited my code to show my fix

user_5300921 · Answer

You can try:

editor:
  externalPlugins:
    youtube: {resource: "EXT:image_displayer/Resources/Public/youtube/plugin.js"}
    typo3image:
      allowedExtensions: "jpg,jpeg,png"
   
  config:
    allowTags:
      - pre
      - code
      - iframe
    allowedContent: true
    removePlugins: null

processing:
  allowTags:
    - pre
    - code
    - iframe    
  allowedContent: true
  removeFormatAttributes: ""
  youtube_width: 550

It can be possible you need a youtube plugin also

get plugin: https://ckeditor.com/cke4/addon/youtube

Put the plugin in custom_ext/Resources/Public/CKEditor/Plugins/youtube/ folder

Also:

Paste the embed code in the source view of the editor, maybe instead of using the youtube button.

This line is also needed:

lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)

Typo3 CKeditor <iframe> YouTube video issue

1 Answers