Tips For Integrating WYSIWYG with Video Embed Field Module in Drupal

Sibu Stephen
Sibu Stephen
Front End Developer
blog image

Important Note: If you are installing the Video Embed Field module for integration with a media library, core already contains all the tools required for embedding remotely hosted videos. This module should no longer be required for most use cases and should be avoided if possible.

The Video Embed Field module has been around for a long time and many older sites leverage it to embed videos inside of Drupal. We came across a few sites that had issues with this module where the video was rendering JSON to the screen instead of rendering the actual video. Here is a quick overview of the issue, why it happens and how to resolve it.

Sometimes we might face an issue when we try to upload a video which might show properly in the WYSIWYG editor but when we try to preview the content the video renders json instead of html.

`{"preview_thumbnail":"/sites/default/files/styles/video_embed_wysiwyg_preview/public/video_thumbnails/1.jpg?itok=EtgTcmmI","video_url":"https://www.youtube.com/watch?v=jNQXAC9IVRw","settings":{"responsive":0,"width":"854","height":"480","autoplay":0},"settings_summary":["Embedded Video (854x480)."]}`

This happens because the filter processing of your WYSIWYG is configured in the wrong order. To fix this, drag the "Video Embed WYSIWYG" inside "Filter Processing order" just below the “Limit allowed HTML tags and correct faulty HTML”.

Filter processing order

 

Are you having issues with your Drupal website? We are here to help. Contact us using the form below.

Drupal
Have issues with your Drupal website?
Have issues with your Drupal website?
We're here to help.