embedding a <video> tag within a <p> tag breaks the <video> tag in chrome and firefox
I found this problem with the HTML5 video tag and it has me very puzzled.  If I embed a video tag within a paragraph tags, it stops working properly in some browsers.

Can anybody throw any light on this?

The video tag is a bit tricky, so the problem takes a bit of explanation.  To illustrate it, here's an HTML5 page that you can run.  It uses a handy .mp4 test video from a Microsoft website:

    <!DOCTYPE html>
    <html>
      <head><title>video with no para</title></head>
      <body>
        <video controls>
        <source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
            type='video/mp4'/>
          These words and the button below should not be visible
          in an HTML5 browser
          <form method='get' action='www.microft.com'>
              <input type='submit' value='MS Home'</form>
        </video>
      </body>
    </html>


An HTML5 video tag can have one or more source tags, each giving a video in some format.  The browser will display one video that it can handle.  To cope wih browsers that don't understand HTML5, a video tag can contain extra stuff outside the source tags.  An HTML5 browser should ignore this extra stuff.  A non-HTML5 browser should ignore any tags it doesn't understand (in this case video and source), so it will ignore the video and render just the other stuff.  In the real world, the other stuff would usually provide some way to download and play the video.  In this example, the other stuff is a bit of text and a form that displays a button.

So, different browsers will display this page in different ways.  The latest versions of Chrome and IE understand HTML5 and they know how to render a .mp4 source, so they should present the video.  They SHOULD NOT display the text or the button.

The latest version of Firefox handles HTML5 but doesn't know how to play a .mp4.  It needs a video in ogg format.  It handles this problem by displaying a black box where the video should be.  However, once again, it should not display the text or the button.

Older versions of these browsers that don’t do HTML5 should display just the text and the button.

The HTML shown above works as expected.  The problem happens if I wrap a para around the video section:

    <!DOCTYPE html>
    <html>
      <head><title>video with para</title></head>
      <body>
        <p>
          <video controls>
          <source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
              type='video/mp4'/>
    	These words and the button below should not be visible
    	in an HTML5 browser
    	<form method='get' action='www.microft.com'>
    		<input type='submit' value='MS Home'</form>
          </video>
        </p>
      </body>
    </html>


IE version 9 works properly – it displays the video with no text and no button.

Chrome version 17.0.963.56 m displays the video, ignores the text, as it should, BUT it displays the button below the video panel.

(I'm new to stackoverflow and not yet allowed to post pictures, so I can't give a screenshot  If you want to see what happens, run the HTML yourself.)

Firefox 9.0.1 displays the black box as before, but it also displays the button.

If this happened with just one browser, I would just assume it was a simple bug.  What puzzles me is that in both Chrome and Firefox break in the same way.

Of course, you could argue that wrapping a video in para tags makes no sense, but it seems to me that it shouldn’t cause a problem.  Also, I wonder what other wrappers might break it.


  [1]: http://i.stack.imgur.com/sDawO.png
embedding a <video> tag within a <p> tag breaks the <video> tag in chrome and firefox
===

I found this problem with the HTML5 video tag and it has me very puzzled.  If I embed a video tag within a paragraph tags, it stops working properly in some browsers.

Can anybody throw any light on this?

The video tag is a bit tricky, so the problem takes a bit of explanation.  To illustrate it, here's an HTML5 page that you can run.  It uses a handy .mp4 test video from a Microsoft website:

    <!DOCTYPE html>
    <html>
      <head><title>video with no para</title></head>
      <body>
        <video controls>
        <source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
            type='video/mp4'/>
          These words and the button below should not be visible
          in an HTML5 browser
          <form method='get' action='www.microft.com'>
              <input type='submit' value='MS Home'</form>
        </video>
      </body>
    </html>


An HTML5 video tag can have one or more source tags, each giving a video in some format.  The browser will display one video that it can handle.  To cope wih browsers that don't understand HTML5, a video tag can contain extra stuff outside the source tags.  An HTML5 browser should ignore this extra stuff.  A non-HTML5 browser should ignore any tags it doesn't understand (in this case video and source), so it will ignore the video and render just the other stuff.  In the real world, the other stuff would usually provide some way to download and play the video.  In this example, the other stuff is a bit of text and a form that displays a button.

So, different browsers will display this page in different ways.  The latest versions of Chrome and IE understand HTML5 and they know how to render a .mp4 source, so they should present the video.  They SHOULD NOT display the text or the button.

The latest version of Firefox handles HTML5 but doesn't know how to play a .mp4.  It needs a video in ogg format.  It handles this problem by displaying a black box where the video should be.  However, once again, it should not display the text or the button.

Older versions of these browsers that don’t do HTML5 should display just the text and the button.

The HTML shown above works as expected.  The problem happens if I wrap a para around the video section:

    <!DOCTYPE html>
    <html>
      <head><title>video with para</title></head>
      <body>
        <p>
          <video controls>
          <source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
              type='video/mp4'/>
    	These words and the button below should not be visible
    	in an HTML5 browser
    	<form method='get' action='www.microft.com'>
    		<input type='submit' value='MS Home'</form>
          </video>
        </p>
      </body>
    </html>


IE version 9 works properly – it displays the video with no text and no button.

Chrome version 17.0.963.56 m displays the video, ignores the text, as it should, BUT it displays the button below the video panel.

(I'm new to stackoverflow and not yet allowed to post pictures, so I can't give a screenshot  If you want to see what happens, run the HTML yourself.)

Firefox 9.0.1 displays the black box as before, but it also displays the button.

If this happened with just one browser, I would just assume it was a simple bug.  What puzzles me is that in both Chrome and Firefox break in the same way.

Of course, you could argue that wrapping a video in para tags makes no sense, but it seems to me that it shouldn’t cause a problem.  Also, I wonder what other wrappers might break it.


  [1]: http://i.stack.imgur.com/sDawO.png