Search code examples
phpiframeyoutubetypo3

Typo3 CKeditor <iframe> YouTube video issue


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


Solution

  • 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)