Typo3 CKeditor <iframe> 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)

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

thanks you

I'd strongly advise rather use textmedia default tt_content element, as this allows better maintainability. There, instead of an image you can add the public youtube url and let your system config handle everything (e.g. GDPR, PreviewImages, sizes etc). So this approach is quite cheap and more maintainable than allowing iframe in RTE. I know this sounds not helpful, but being at the same problem with a 30k pages install switching every RTE content with youtube iframe to a proper textmedia during the 9LTS upgrade was faster than telling the RTE to allow these. That's why I rather mention it. — NextThursday
Yeah I understand, but it's for a website with already a lot of text/image content that's why I have to fix it — yonea

Rustyjim Rustyjim · Accepted Answer · 2022-02-25T16:42:24

You can try:

# Your PageTSConfig

editor:
  config:
    # RTE default config removes image plugin - restore it:
    removePlugins: null

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

config:

editor:
  externalPlugins:
    youtube: { resource: "EXT:custom_ext/Resources/Public/RTE/Plugins/youtube/plugin.js" }
  config:
    youtube_width: '550'
    extraAllowedContent: '*(*)[data-*]; iframe'

source: https://t3terminal.com/blog/typo3-ckeditor/

Typo3 CKeditor <iframe> YouTube video issue

1 Answers