Embedding video with entity embed in layout builder + CKEditor5

Hi @imran1217,

Can you please elaborate on the 2nd step?

I've tried to add the video to ckeditor using the media module, but I only see the video's title, the player does not load at all.

However the script shouldn't run in the ckeditor anyway (on the node edit form), I would rather display the preview or thumbnail image in the editor instead, much safer. It may require some customization though.

Hi @ yce → ,

Can you please elaborate on the 2nd step?

On pages where the layout builder is enabled, CKEditor5 fields are available only within blocks. Therefore, I provided an example of adding a text block that includes a body field, which allows you to embed videos.

Please refer attach screenshot for more details.

I've tried to add the video to ckeditor using the media module, but I only see the video's title, the player does not load at all.

Not sure what could be the reason but in my case it works fine.

However the script shouldn't run in the ckeditor anyway (on the node edit form), I would rather display the preview or thumbnail image in the editor instead, much safer. It may require some customization though.

I am already using this approach as a workaround and would like the Brightcove team to adjust the player script to work with CKEditor5 as well (on the node edit form).

Thanks!

I don't see the benefit why it would be good to render the video player inside the ckeditor, so I would say it is works as designed.

You can also override the template of the video from your theme if needed and create custom displays to customize how it should be rendered.

For the OP, I ran into this as well and could not get Brightcove's iFrame to work, so I ended up with this:

In mytheme.theme.

/**
 * Implements hook_preprocess_brightcove_player_responsive()
 *
 * We cannot render Brightcove inside CKEditor.
 */
function mytheme_theme_preprocess_brightcove_player_responsive(&$variables) {
  $variables['preview'] = FALSE;
  $route = \Drupal::routeMatch();
  if ($route instanceof RouteMatchInterface && $route->getRouteName() === 'embed.preview') {
    $variables['preview'] = TRUE;
  }
}

In mytheme/templates/brightcove/brightcove-player-responsive.html.twig

{% if preview %}
  {% set img_url = '/' ~ directory ~ '/imgs/video-thumbnail-.jpg' %}

  <div class="brightcove-player sizing-responsive">
    <div style="max-width: {{- max_width ~ units -}};">
      <img class="video__thumbnail" src="{{ img_url }}">
    </div>
  </div>
{% else %}
  <div class="brightcove-player sizing-responsive">
    <div style="max-width: {{- max_width ~ units -}};">
      <video-js class="vjs-fluid"
                controls=""
                data-account="{{- account -}}"
                data-embed="{{- embed -}}"
                data-player="{{- player -}}"
                data-usage="{{- data_usage -}}"
                data-{{- type -}}-id="{{- id -}}"
      ></video-js>
    </div>
    {% if is_playlist %}
      <ol class="vjs-playlist"></ol>
    {% endif %}
    <script src="//players.brightcove.net/{{- account -}}/{{- player -}}_{{- embed -}}/index.min.js"></script>
  </div>
{% endif %}