0

I'm experiencing a sudden problem with an embedded HTML5 video on my Drupal site. At first I thought it was a problem with my HTML5 code, but I believe the problem is with the WYSIWYG editor within Drupal.

I have a video in several formats, and want have a Flash fallback for those less fortunate.

Here is my code:

 <video width="480" height="320" controls="controls" poster="poster.png">
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />

    <object width="480" height="320" 
            data="moxieplayer.swf" type="application/x-shockwave-flash">
       <param name="src" value="moxieplayer.swf" />
       <param name="flashvars" value="url=video.mp4&amp;poster=poster.png" />
       <param name="allowfullscreen" value="true" />
       <param name="allowscriptaccess" value="true" />
    </object>
 </video>

Everything was working as expected. Then I opened the WYSIWYG editor, Disabled rich-text to get to the HTML, and added the "poster" attribute. I clicked save and, ever since, it has been showing TWO videos: the main source and the Flash fallback.

I found that odd so I removed the poster attribute (going back to what I had before), but the problem remained.

I know what the problem is... It became apparent when I viewed the source in the browser. The source is being rendered like this:

 <p><video width="480" height="320" controls="controls" poster="poster.png"><br />
      <source src="video.webm" type="video/webm"></source><br />
      <source src="video.mp4" type="video/mp4"></source><br />
      <source src="video.ogv" type="video/ogg"></source>
    </video>
  </p>
  <object width="480" height="320" data="moxieplayer.swf" type="application/x-shockwave-flash">
     <param name="src" value="moxieplayer.swf" />
     <param name="flashvars" value="url=video.mp4&amp;poster=/" />
    <param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" />
 </object>

Notice that in the rendered code, "object" is now outside the video tag. I'm guessing that's the problem. For whatever reason it was fine, then I edited the code to add the poster, and rocking the boat has resulted in this issue. I am in "Full HTML" mode when making my edits.

Unfortunately, disabling WYSISWG isn't an option as my customer needs to use it. This is a bit frustrating as I suspect that may be the issue. I'm using TinyMCE 3.5.10.

Does anyone have any suggestions on how to deal with this problem?

Thank you very much!

5
  • 1
    Have you tried manually putting the video code back to how it was before with rich text disabled? @Mołot I think this might be more to do with TinyMCE's HTML correction
    – Clive
    Dec 19, 2013 at 19:12
  • 1
    if this has something to do with putting in paragraph tags to mimic a line break, have you tried it without the line break between your last source and the object tag? drupal could be trying to close the tags to do this for you (eg, the video one) before closing the p tag.
    – Jimajamma
    Dec 19, 2013 at 19:21
  • I agree with @Clive. Dealing with the WYSIWYG quirks with mangling HTML is a common Drupal problem.
    – mpdonadio
    Dec 20, 2013 at 2:11
  • Thank you for the comments, everyone! I did try putting the video code back in manually (with rich text disabled). What's odd is that the code is correct when viewed within the Drupal admin. But when it's viewed in a browser, it's changed. So something is happening when the page is loaded. I did try removing the paragraph tags as well, but Drupal/WYSIWYG insists that they need to be there. :-P
    – mrbranden
    Dec 20, 2013 at 15:27
  • @mrbranden That's what happens when you have an input filter active. Try set it to FULL HTML or disable it completely ("Disable rich text" link doesn't do this, it just disables the editor temporarily)
    – Beebee
    Oct 9, 2014 at 15:56

2 Answers 2

1

In these kinds of cases, the easy fix would be to add a second text field for "embed code" outside the main wysiwyg area. If you set it to use a new "HTML without linebreaks" text formatter, that'll help eliminate any wackiness on the "Full HTML" default setting.

Protip: use the Better Formats module to stop the user from having to choose a format for this field. That way, they can just paste and forget.

1
  • Hmm... that's interesting. I'm going to try to figure out how to do that and give it a try. Thanks!
    – mrbranden
    Dec 20, 2013 at 15:27
0

It happened for me too when the "Convert line breaks into HTML" filter is activated in the corresponding text format... although there is absolutely no line break in the video/object tag (?!). But disable the filter fixed the problem.

As I absolutely need this filter to be enabled, I resolved fixing it with a bit of jquery, putting the object back inside the video tag.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.