0

I'm using html5 video for a site and have both mp4 and ogg formats supported. The height of the video is set to 350px via CSS. Code here:

<video autoplay loop>
    <source src="assets/videos/vid.ogv" type="video/ogg">
    <source src="assets/videos/vid.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

In firefox, the code is replaced with an embedded mp4, and looks like this:

<embed width="700" height="350" src="assets/videos/vid.mp4" mode="null" autoplay="true" loop="true" pluginspage="http://go.divx.com/plugin/download/" type="video/divx"></embed>

The problem is, in firefox the video dimensions are wrong. The original video is in portrait, and firefox turns it into a landscape video, cutting off the bottom of the original. Changing the width and height doesn't work because the aspect ratio is wrong.

What I'd like to have happen is for firefox to just use the ogg video, which looks fine, but I'm not sure how to do this. I tried using JS to remove the mp4 line to force ogg if the browser was FF, but at the time the js ran the code was already changed to the embed code. There are multiple videos and I'm hoping there's a better solution than using JS to hardcode the html for each video.

Thanks!

vsnapple
  • 1
  • 1
  • 1

1 Answers1

0

Wrap the embedding in a div and set height and with to the div .instead of setting height and with to the embedding 

 <Div width="700" height="350">
 <embed src="assets/videos/vid.mp4" mode="null" autoplay="true" loop="true" pluginspage="http://go.divx.com/plugin/download/" type="video/divx"></embed>
</Div>

or just try this 

<Div width="700" height="350">
<video autoplay loop>
<source src="assets/videos/vid.ogv" type="video/ogg">
<source src="assets/videos/vid.mp4" type="video/mp4">
Your browser does not support the video tag.

Midhun
  • 3,850
  • 1
  • 23
  • 26