Video being cutoff in IE11

I've got a strange problem and I'm not sure if it should be posted here or in the Javascript forum.

I'm trying to display a video as part of my web page.

The code is pretty straight forward:

Code:

---

<table bgcolor="#6b8ab6" border=5 bordercolor="#2b405b"><tr><td>
  <video id="video1" width="500" controls autoplay>
      <source id="video2" src="http://michiganbuttonsociety.org/Testing/AV_Files/BoneButtons1.ogg" type="video/ogg">
      <source id="video2" src="http://michiganbuttonsociety.org/Testing/AV_Files/BoneButtons1.mp4" type="video/mp4">
  </video>
</td></tr></table>

---

It works fine in the .ogg format and even in .webm format. But when I convert it to .mp4 (for IE), the sides of the frames are cut off. I've never seen this happen before.

I don't think the problem is in the video itself, because when I view the .mp4 file in my video editors and players, it looks good.

Does anyone have an idea of why this is happening or, better yet, how to solve it?

Thanks,
Jim

It works fine as it is with IE11.

I think it works fine the code is ok what eror you get let me know and it should be posted here and it is good to help you let me know what eror you get.