Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
Media tags for video files embedded in a WYSIWYG field get converted to <video controls="controls"><source src="http://example.com/sites/default/files/video.mp4" type="video/mp4" /></video> tags in the WYSIWYG and are stored in the database that way instead of as [[{"fid":"14842","view_mode":"default","fields":{"format":"default"},"type":"media","attributes":{"autoplay":"false","height":500,"width":643,"class":"media-element file-default"},"link_text":null}]]
This is a problem for a few reasons:
- The file url is absolute, causing issues when dealing with multiple environments
- You can not edit the file by clicking the Media WYSIWYG button, like you can for images
- If you have "Limit allowed HTML tags" on your text format before "Convert Media tags to markup", and you don't allow
<video>and<source>then the video is stripped and the Media filter has nothing to insert the video
Proposed resolution
There are a few similar issues in the queue, but I think they are all slightly different, and some of them are major rewrites. While some of those may help fix this issue, I think there are simpler solutions to fix this in the short term.
Some of the other issues I see related to video and wysiwyg:
#2150455: WYSIWYG: videos inserted as <video>, excluded by rich text editor filters.
#2195491: Change request to support WYSIWYG
#1283844: [meta] Improve WYSIWYG integration
#2287699: WYSIWYG Video - Classes not applied and no wrapper markup
#1792738: Allow custom file view modes for WYSIWYG display
#2315959: can't add video with CKEditor add Media button
Remaining tasks
- Test patch for videos
- Test if this also effects audio file embeds
- Test if this also effects different file view modes
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | media-video_media_in_wysiwyg-2575077-5.patch | 1023 bytes | chasingmaxwell |
| |||
| #4 | media-video_media_in_wysiwyg-2575077-4.patch | 866 bytes | chasingmaxwell |
| #2 | media-video_media_in_wysiwyg-2575077-2.patch | 1.08 KB | jojonaloha |
Comments
Comment #2
jojonaloha CreditAttribution: jojonaloha at Metal Toad commentedThe attached patch just adds
<video>to the regex inmedia_wysiwyg.filter.js. I am assuming this is probably a problem with audio too and there are probably issues with certain view modes too.Comment #3
jojonaloha CreditAttribution: jojonaloha at Metal Toad commentedComment #4
chasingmaxwell CreditAttribution: chasingmaxwell commentedIn my case I was using oembed and needed to handle iframes. I've attached a patch that uses jojonaloha's same approach to add both
<video>and<iframe>s to the regex. I know this is just a bandaid, but maybe it will be helpful to someone else who just needs this to work.Comment #5
chasingmaxwell CreditAttribution: chasingmaxwell commentedAnd now I need
<object>tags too so here's an updated patch.Comment #6
rooby CreditAttribution: rooby commentedThis is pretty close to working for me.
When I add a video it displays as expected in the editor.
Then if I toggle WYSIWYG off it gets converted back to a token again as expected.
Then if I toggle WYSIWYG on again the video doesn't come back. - Well the video markup actually does come back but it is blank and you wouldn't tell it was there if you didn't inspect the markup using developer tools.
It still all works when I save the content though and if I toggle WYSIWYG off again the token is still there.
I am using the latest CKEditor module and almost latest dev of media (one commit behind) and am uploading an mp4 file.
Not sure if this is an issue relating to this patch though or if it is an issue somewhere else.
Comment #7
chasingmaxwell CreditAttribution: chasingmaxwell commentedLooks like this might not be a problem anymore with 7.x-2.0-beta14. There has been significant changes to media_wysiwyg.filter.js and video embeds are working for me now without this patch. If someone else can confirm on their setup we should mark this as fixed.
Comment #8
jojonaloha CreditAttribution: jojonaloha at Metal Toad commentedNone of the patches in this issue still apply. And it looks like the media tags are being, but I'm seeing a
<source src="http://example.com/sites/default/files/video.mp4" type="video/mp4" />tags still and after saving and re-editing there are a ton of them.Also, you still cannot edit the file by clicking the Media WYSIWYG button, like you can for images.
Comment #9
jojonaloha CreditAttribution: jojonaloha at Metal Toad commentedComment #10
moonray CreditAttribution: moonray at Chapter Three commentedI'm also occasionally seeing the
<source />tag as well.Comment #11
joseph.olstadConflicting reports, one saying beta14 works and others not very clear on details saying otherwise. please be very verbose in configuration setup and steps to reproduce
Comment #12
Chris Matthews CreditAttribution: Chris Matthews as a volunteer commentedRecent versions of media have resolved most of peoples concerns and is compatible with entity translation, multilingual and various advanced configurations. Due to the high volume of inactive and most often irrelevant issues we are Closing this as (outdated). If for whatever reason this issue is important to you AND you still have issues after checking the media recipe documentation, then let us know and we will review your concerns.
Otherwise, see the recipe documentation for how to configure media and for troubleshooting tips OR refer to the media_dev distribution if you want to see a working media setup.
As mentioned, feel free to make some noise in this issue if you still feel it is important to you or someone else.
Thanks,
Media team