Image in tag is defaulting to 0 x 0 pixels despite setting its size

Question

For some reason I'm unable to set the image size when using an <img> tag inside an html5 video element. It is always defaulting back to 0 x 0 pixels.

The reason I'm using this img is as a fallback for ancient browsers where the video tag just will not work.

Here's my code NOTE I have deliberately removed "myVideo.mp4" to mimic the fallback :

<video id="welcome" height="1080" width="1920" preload="auto" loop autoplay>
   <source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
   <img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>

This produces the following result (when debugging in chrome). Note the "0x0 pixels (Natural: 1920 x 1080)"

0 pixels

Does anyone have any suggests as to a fix? Thanks v much

andyb · Accepted Answer

I believe this is the browser's way of hiding the <img> since the <video> element is supported in Chrome. If you open this in IE8 for example, the fallback <img> content is displayed correctly.

The conditions you have used to test the fallback are incorrect. Removing the video source will simply result in the browser not finding the content (i.e. a 404). In this case, the correct fallback is to use the poster="" attribute on the <video> element, which is not in your markup.

poster

The address of an image file for the UA to show while no video data is available

For example:

<video poster="@Url.Content("~/_video/posterframe.jpg")" id="welcome" height="150" width="150" preload="auto" loop autoplay>
   <source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
   <img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>

Full Demo (working for me in Chrome 26)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML5 video demo</title>
</head>
<body>
  <video id="welcome" height="150" width="100" preload="auto" loop autoplay poster="http://lorempixel.com/150/100/abstract/1/">
   <source type="video/mp4" src="http://www.808.dk/pics/video/gizmo.mp4" />
   <img src="http://lorempixel.com/150/100/abstract/1/" height="150" width="100" alt="" title="Your browser does not support the <video> tag"/>
</video>
</body>
</html>

Image in <img> tag is defaulting to 0 x 0 pixels despite setting its size

Tags:

html

css

image

html5-video

WheretheresaWill

1 Answers

andyb

Recent Activity

Donate For Us