HTML5 Video showing both Source and Flash fallback 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:

 &lt;video width="480" height="320" controls="controls" poster="poster.png"&gt;
    &lt;source src="video.webm" type="video/webm" /&gt;
    &lt;source src="video.mp4" type="video/mp4" /&gt;
    &lt;source src="video.ogv" type="video/ogg" /&gt;

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


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:

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


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!
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.